webpack4 学习 --- 处理静态资源

　　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']
}

webpack4 学习 --- 处理静态资源

猜你喜欢