使用webpack 4打包项目—进阶篇之loader

上一篇webpack基础篇

这篇文章主要讲一下webpack中一些包的用法。

1. html-webpack-plugin

1. 这个包可以使我们，自动在内存中根据指定页面生成内存的页面，然后在页面上加载的时候显示内存后脏的页面。

2. 并且它还会将我们打包好的bundle.js自动插入到html中，因此这样我们就不需要自己在index.html中手动的引入bundle.js.

3. 下载这个包

   npm i html-webpack-plugin -D  
   

4. 在webpack.config.js 做出如下配置，插件在 plugins 配置对象中new 出来这个构造函数，传入配置对象就ok了，这个filename和template的文件名需要一致。

const path = require('path')

const htmlWebpackPlugins = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    mode: 'development',
    plugins: [
        new htmlWebpackPlugins({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ],
}

---

webpack, 默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件，因此我们如果需要打包其他类型的文件（样式，图片等）需要依赖一些loader包。

2. 处理样式的loader包

2.1 css-loader

下载

npm i style-loader css-loader -D

然后在webpack.config.js中配置如下

    module: {
        rules: [
            //配置处理.css文件第三方loader规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }

test中匹配的使用的是正则

2.2 less-loader

npm i less less-loader -D

module: {
    rules: [
        //配置处理.less文件第三方loader规则
        { test : /\.less$/, use: ['style-loader','css-loader', 'less-loader']}
    ]
}

2.3 sass-loader

cnpm i sass-loader node-sass -D

这里强调一下 为啥这个用的使cnpm，npm和yarn这里下载不下来，换源不知为什么也不行。

module: {
    rules: [
        //配置处理.scss文件第三方loader规则
        { test : /\.scss$/, use: ['style-loader','css-loader', 'sass-loader']}
    ]
}

3. 处理url的loader

3.1 url-loader

我们在样式中用一些背景图 这个时候就使用到了url 例如 backgroun-imgage: url('')这种webpac也是无法打包的，需要我们安装依赖

npm i url-loader file-loader -D

在配置文件中除左如下配置

 module: {
        rules: [
            { test : /\.(jpg|png|gif|jpeg|bmp|PNG)$/, use: 'url-loader'}
        ]
    }

这里的图片在页面上显示默认会转成base64编码的，如果不想让他转的话可以在url-loader?limit=123

注意这个limit的这个值必须小于图片的原大小才能不适用base64编码，并且你会发现图片的名称不一样了，这个是因为为了防止图片重名，当然这个也是可以设置的url-loader?limit=123&name=[name].[ext] 就行了,

这个ext是保证后缀名一致。这样的话项目中如果有两个名称一样的图片，在页面两张图片会显示成一样的，如果我们又想使用名称又想，不一样我们可以这样 limit=123&name=[hash:8]-[name].[ext]

{ test : /\.(jpg|png|gif|jpeg|bmp|PNG)$/, use: 'url-loader?limit=12170&name=[hash:8]-[name].[ext]'}

这个就是在他们名称前面拼接了8位的hash值。
这个是webpack4写法

{
    test: /\.(jpg|png|gif|jpeg|bmp|PNG)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192
            }
        }
    ]
},

除此意外呢 这个url-loader还能处理字体文件的加载，只需要加一个配置就行了。

4. 转义ES6+的loader

main.js

class Test {
    static info = { name: 'zs', age: 20}
}
console.log(Test.info)

例如上面的示例，这里我们用到的是babel-loader

最新的webpack4和新版的babel-loader根以前的不太一样注意安装的版本和配套使用。

npm i [email protected] @babel/core @babel/preset-env 

接下来下载这个包是转义一些js的新特新，比如es6中类的一些语法。
官方文档 这里面具体有那些语法需要用这个包
当然你如果并没有用到这些es6特性这个包也不用装。

npm i @babel/plugin-proposal-class-properties -D

我这里这个包版本是7.83的。

然后再webpack.config.js中配置如下

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
        }
    }
}

这样就配置好了。
上一篇webpack基础篇