webpack 是利用loader 来处理各种资源的,wepback的配置基本上就是为各种资源文件,指定不同类型的loader。
1,处理css
最基本的css 处理loader 是css-loader , style-loader. css-loader 处理的是css 中的@import 和url, 根据路径(相对路径)找到相应的资源,但它不处理具体的资源,比如,img, 是由file-loader或url-loader 来处理的,这个以后再说. style-loader则是把打包后的css文件插入到html中,具体的方法是,它会生成一个内联的style 标签,然后把css注入到这个style标签中,它实现了模块热更新,修改css样式的时候,页面不会强制刷新,就能看到变化。那就npm install css-loader style-loader --save-dev 安装它们。 安装完成后,在webpack中进行配置。配置文件中有一个module属性,module 属性下面有一个rules 属性,它是一个数组,loaders 的配置写在它的里面,每一个配置项都是一个对象,指明要处理哪种文件,使用哪一种loader, 最简单的配置如下
const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.css$/, // 正则表达式,指明要处理的文件类型 use: ['style-loader', 'css-loader'] // 处理资源所使用的loader, 要注意loader的顺序,从右向左执行 } ] }, devServer: { contentBase:'build', proxy: { '/api': 'http://102.03.34.58/api' }, port: 9000, // 设置端口号 stats: 'errors-only', // 只有产生错误的时候,才显示错误信息,日志的输出等级是error. overlay: true // 当有编译错误的时候,在浏览器页面上显示。 }, plugins: [ new htmlWebpackPlugin() ] }
写一点css样式,看配置有没有生效,在src 目录下,新建一个css文件夹,里面写一个style.css文件,随便写一点样式,
body { background: blue; }
然后在index.js 中引入import ‘./css/style.css’.
// 引入css 样式 import './css/style.scss'; import component from './component'; document.body.appendChild(component())
npm run dev 启动服务器,可以看到页面有了背景色,这时我们可以随便更改body的背景色,页面也会时时做出了变化,非常方便开发。
当然,你可能使用css 预处理器, less, sass stylus等, 这也简单,安装相应的loader 就可以了,
less: npm install less less-loader --save-dev,
sass: npm install node-sass, sass-loader --save -dev,
stylus, npm install stylus, stylus-loader --save-dev,
然后在use中增加一条相应的loader
rules: [ { test: /\.css$/, // 正则表达式,指明要处理的文件类型 use: ['style-loader', 'css-loader'] // 处理资源所使用的loader, 要注意loader的顺序,从右向左执行 }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.styl$/, use: ['style-loader', 'css-loader', 'stylus-loader'] } ]
最后再来说一下PostCSS, 它的配置稍微麻烦一点,因为PostCSS是由插件来起作用的,使用哪个功能,就要安装哪个插件,如果只安装postcss-loader, 它并不起作用,这和babel-loader一样, 比如要使用添加浏览器厂商前缀的功能, 在安装postcss, postcss-loader 后,还要安装对应的插件autoprefixer , npm install postcss, postcss-loader, autoprefixer --save-dev. 安装完成后,就要进行配置。对于纯css 来说,我们最先使用postcss-loader, 所以postcss-loader要放到最右边,但是又不能只写一个postcss-loader 放在那里,因为它自己不起作用,需要对postcss-loader进行配置。配置的方式有两种,一种是在webpack的配置文件中,一个是单独给postcss写一个配置文件。
如果在wepback的配置文件中配置postcss-loader,那postcss-loader 就不能是一个字符串了,要是一个对象, loader属性 是我们指定的loader, options 就是我们指定的配置项,对于postcss-loader 来说,它的配置项是plugins, 使用到的插件, 是一个函数,返回一个数组,数组中就包括用到的插件。
{ test: /\.css$/, use: ['style-loader', 'css-loader', { // 使用对象对postcss-loader进行配置,对象有两个属性loader, options // loader属性就是指定使用的loader, options 就是该loader的配置项,也是一个对象 loader: 'postcss-loader', options: { plugins: () => ([ require('autoprefixer') ]) } } ] }
但是当我们使用很多插件进行开发,这样在配置文件中进行配置就很麻烦了,也会导致配置文件比较庞大,这时就要使用PostCSS配置文件,它的配置文件有很多格式,json, yml, js的都可以,有兴趣的可以看一下官方文档。我在这里就使用postcss.config.js. 在项目根目录下建立一个postcss.config.js 文件,它的格式如下,module-export 出一个带有plugins属性的对象。plugins属性也是一个对象,属性名就是使用的插件的名称,属性值是一个对象,对这个插件的配置。
module.exports = { plugins: { "autoprefixer": { browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 0.01%" ] } } }
使用配置文件后,webpack的配置文件还原到以前的状态,
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
现在在style.css中给body, 添加box-sizing: border-box; 看一下效果。
body { background: blue; box-sizing: border-box; }
打开浏览器控制台,可以看到添加了webkit- 的浏览器厂商前缀。
当使用css 预处理的时候,它要放到预处理器loader 的后面, 也就是说,先使用预处理器loader, 再使用postcss-loader. 当然配置还是一样的。以scss 为例
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }