使用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 babel-loader@8 @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基础篇