webpack（二）

2019年1月8日19:21:47

今天主要写一下关于loader的东西，虽然各种npm i -s xxx-loader装个不停，但是总体上的思路却没什么特别大的变化。
另外关于webpack4.x与webpack3.x的区别似乎又成为了一个让人头疼的问题。

1.将es6转化为es5

使用babel-loader与babel-core可以使在打包时将es6语法转化为es5语法。安装后需要在webpack.config.js里添加对应的配置信息。

npm i -s babel-loader babel-core

其中，正则表达式的部分不能使用i来进行大小写的设置，设置exclude可以忽略指定目录，设置include可以仅打包指定目录，节省打包所需的时间。

module:{
        rules:[
            {
                test:/\.js$/,
                use:{loader:"babel-loader"},
                exclude: /(node_modules|bower_components)/,
                include : path.resolve(__dirname,'src')
            },
          ]
}

2.处理css文件

npm i -s css-loader style-loader

使用css-loader和style-loader可以处理css文件，但需要注意的是，在use数组中添加对应的loader时引用顺序是从下往上的

3.给css加上浏览器前缀

考虑兼容问题css需要加上前缀才可以使用，需要安装postcss-loader和autoperfixer

npm i -s postcss-loader autoprefixer

为了正确的使用postcss-loader我们需要配置一个postcss.config.js文件

postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 5 versions']
        })
    ]
}

4.处理@import引入的css文件

在loader里给css-loader设置参数autoperfixer:1即可使@import引入的文件添加浏览器前缀

{
                    loader:"css-loader",
                    options:{
                        importLoaders:1
                    }
                }

5.处理less文件

使用less-loader可以处理less文件，但同时在处理less文件时，项目里也需要安装less依赖

6.处理html模板与ejs模板

对于html模板的处理，其实安装html-loader就可以了，ejs的话对应的是ejs-loader，两者没有特别大的区别，只是前者在app.js中以文本的形式插入进innerHTML中，后者则是一个带参函数直接渲染页面里的数据。

6.处理图片及其他资源

使用file-loader可以打包图片资源，但如果引用在模板里，会出现资源的路径问题。解决方法是在模板里使用如下语法

${ require(...path) }

打包图片资源时可以使用url-loader并设置参数limit使文件体积大于该数值的资源压缩。
对于图片资源还可以使用image-webpack-loader直接压缩图片资源。