webpack2系列step2--CSS

时间 2019-11-11

标签 webpack2 webpack 系列 step2 step css 栏目 CSS 繁體版

原文原文链接

第二篇：CSS的打包处理css

CSS的打包，固然也包括预处理如：scss，less的打包处理了。node

这里引入一个概念，加载器（loader）。webpack

npm install --save-dev css-loade style-loadergit

npm install --save-dev sass-loader(less-loader) node-sass 项目中用到哪一个就用哪一个预编译的loader,咱们这里选择sass
github

按照步骤安装以上的loaderweb

自动补全浏览器后缀autoprefixer npm install --save-dev postcss-loadernpm

这样css打包用到的加载器基本都在这里了浏览器

npm install --save-dev webpack-dev-server 自动刷新了而且修改生效了sass

发的时候咱们并不在乎 style这种形式，可是咱们但愿在生产环境下 css能从js文件宏分离出来，咱们但愿能css能跟js并行加载，并且能够避免由于Js文件过大，加载慢而产生的flash of unstyle(无样式页面闪烁)。less

npm install --save-dev extract-text-webpack-plugin 使用“extract-text-webpack-plugin@2.1.2”插件来分离css代码。(安装版本必定要对应，2对应2，3对应3)

完整的代码截图以下，看不懂的都有注释

执行npm run build 生成的文件目录

附上源码路径：leo的GitHub

https://github.com/suxiaoX/webpack2