实战webpack4.0常用配置与优化

从上图我们可以看到，我们所写的css、less样式都会放到head标签中，那么我们如何单独把css的内容抽离出来用link标签的形式引入呢：

• 首先，先安装抽离 css 的插件 : yarn add mini-css-extract-plugin -D
• 安装好之后，在 配置文件中 引入：let MiniCssExtractPlugin = require('mini-css-extract-plugin')
• 然后在配置文件中的插件配置中进行配置：

plugins: [ //数组， 放着所有的 webpack插件
        new MiniCssExtractPlugin({
            filename:'main.css', //抽离出来的css的文件的名字
        })
    ],

• 然后选择，到底是 css 文件要抽离，还是 less 文件要抽离，那个要抽离就给那个 加上抽离插件的内置loader。（在模块中的 css 、less 规则中加 ）：如下：

module: { //模块
        rules: [ //规则
            {
                test: /.css$/, //用正则来匹配以 css 结尾的文件
                use: [
                    MiniCssExtractPlugin.loader,//这个loader的作用是：抽离出来 css然后用 link 标签引入到 模板文件中
                    'css-loader'
                ]

![](https://user-gold-cdn.xitu.io/2019/11/14/16e68118b17b28e6?w=1477&h=705&f=jpeg&s=127105)            },
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,//这个loader的作用是：抽离出来 css然后用 link 标签引入到 模板文件中
                    'css-loader',
                    'less-loader' //把 less --->转换为 css
                ]
            }
        ]
    }

• 运行npm run build命令，看一下是否单独抽离出来css文件：

可以看到，我们的css文件已经被单独抽离出来了，启动一下服务看一下页面效果：

现在已经变成抽离出来的css文件是用link标签来引入的。

1.安装 babel-loader：转换加载器，和 babel/core（babel 的核心），和babel/preset-env (转化模块)

yarn add babel-loader @babel/core @babel/preset-env
复制代码

2.安装完成之后，在配置文件中配置 js规则：

 {
                test: /.js$/,
                use:{
                    loader: 'babel-loader',
                    options: { // 用 babel-loader，需要把 es6 转换为 es5
                        presets: [  //预设库
                            '@babel/preset-env'  //包含把es6转换为es5的模块
                            '@babel/preset-react' //解析 react语法
                        ]
                    }
                }
            },
复制代码

//配置完成后就可以解析 `es6` 语法。 
   
//更高一级的语法的配置：(注意：先安装完在配置)
   
   {
                   test: /.js$/,
                   use:{
                       loader: 'babel-loader',
                       options: { // 用 babel-loader，需要把 es6 转换为 es5
                           presets: [  //预设库
                               '@babel/preset-env'  //包含把es6转换为es5的模块
                           ],
                           plugins: [
                               //更高级的语法解析（如装饰器写法）
                          ["@babel/plugin-proposal-decorators", { "legacy": true }],
                          ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                           ]
                       }
                   }
               },
复制代码

1. @babel / plugin-transform-runtime (可以处理异步，如 Promise等)代码运行时的包 开发依赖：

   yarn add @babel / plugin-transform-runtime -D 先进行插件的安装

2. @babel/runtime : 这个包上线时需要，所以安装时不要加 -D

   yarn add @babel/runtime

3. 安装好之后，进入到配置文件中配置安装好的插件：

		{
                test: /.js$/,
                use:{
                    loader: 'babel-loader',
                    options: { // 用 babel-loader，需要把 es6 转换为 es5
                        presets: [  //预设库
                            '@babel/preset-env'  //包含把es6转换为es5的模块
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"  //加入到这个位置
                        ]
                    }
                },
                include:path.resolve(__dirname,'src'), //找 src下面的 js
                exclude:/node_modules/  //不包含 node_modules 下面的 js
            },
复制代码

默认找到的是全部的 js， 我们还得写一些规则来让它只找 src 下面的 js文件。

4.还有一些更高级的语法不支持转换，安装一个补丁模块：

yarn add @babel/polyfill 这个模块在代码运行时需要，所以安装时不要加 -D。

用的时候需要在上面引入这个模块： require('@babel/polyfill')

1. 需要先安装 eslint 和 eslint-loader：

   yarn add eslint eslint-loader -D

2. 然后在配置文件中的模块配置中去配置 js 规则:

	{
            	//在配置一个 js 规则，用来校验 js
                test: /.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        enforce: 'pre' // 强制  强制在下一个 loader 之前执行  post 是后面
                    }
                }
            },
            {
                test: /.js$/,
                use:{
                    loader: 'babel-loader',
                    options: { // 用 babel-loader，需要把 es6 转换为 es5
                        presets: [  //预设库
                            '@babel/preset-env'  //包含把es6转换为es5的模块
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'), // 包含 src 下面的 js 文件
                exclude: /node_modules/  // 去除掉 node_modules
            },
复制代码

loader 的类型：pre 前面执行的 loader， normal 普通 loader，内联 loader，post 后置 loader。

用 jquery 举例说明：

​ >>>>> 内联 loader，就是在 代码中就可以直接使用的 loader。

​ 1. 先安装 jquery ， yarn add jquery

​ 2. 在代码中引入：import $ from 'jquery'

​ 3. 将 $ 符 暴露到全局去：那么这就需要一个暴露 全局的 loader：expose-loader ，这个loader是内联的。

import $ from 'expose-loader?$!jquery'
复制代码

​ 这是内联 loader 在代码中的直接用法。 jquery 暴露 出 一个 $ 符 到全局。

4. 也可以在 配置文件中去配置 内联 loader：

   module: { //模块
           rules: [ //规则   
               {
                   test: require.resolve('jquery'), //只要引用了 jquery 就去匹配
                   use: 'expose-loader?$'
               },
           ]
   }
   复制代码

5. 注解的方式： 在每个模块中注入 $ 对象：

   • 这个时候需要 webpack 的插件： 先要引入 webpack

   • let webpack = require('webpack')
     复制代码

   • 然后在配置文件的 插件配置中 去配置：

   • new webpack.ProvidePlugin({  // 在每个模块中都注入 $ （提供插件）
                $:'jquery'
            })
     复制代码

6. 在模板中直接引入 jquery 的 cdn ,但是这样在打包的时候会将 jquery 一起打包，这个时候 需要在 配置文件中添加一个属性来不打包 jquery ：

   // 表明这是外部引入的，并不需要打包。
   externals: {
   jquery: '$' 
   }
   复制代码

在 js 中创建图片来引入：

// 1）在 js 中创建图片来引入
let image = new Image()
image.src = './logo.png' //就是一个普通的字符串
document.body.appendChild(image)
复制代码

这样来引入的话，找不到这张图片，因为这样写的话图片只是一个普通的字符串。要用es6的语法来导入图片.

import logo from './logo.png' //把图片引入，返回的结果是一个新的图片地址
let image = new Image() 
console.log(logo)
image.src = logo
document.body.appendChild(image)
复制代码

这样写的话是不支持的，需要引入一个 loader 来实现这种写法：file-loader 。

安装完成 loader 之后，我们需要到配置文件中去配置 加载图片的规则：

module: { //模块
        rules: [ //规则   
            {
                test: /.(png|jpg|gif)$/,
                use: "file-loader"
            },
        ]
}
复制代码

在 css 中引入图片：

background: url('图片地址') /* 可以直接这样来写，这是默认支持的，因为我们用了 css-loader css-loader会吧这个转化为 require()这种写法*/
复制代码

在 html 中直接引入

<img src="./logo.png" alt="">
复制代码

这样写会报错，因为在我们打包的文件中根本找不到这张图片。这个时候我们需要一个 loader 来支持这种写法。

yarn add html-withimg-loader -D 这个 loader 会帮我们解析 html 编译图片.

安装完成之后到配置文件中配置我们的 loader：

module: { //模块
        rules: [ //规则   
            {
                test: /.html$/,
                use: 'html-withimg-loader'
            },
        ]
}
复制代码

一般我们用于图片的loader 不是用 file-loader， 而是用 url-loader

			{
                test: /.(png|jpg|gif)$/,
                use: {
                    // 做一个限制，当我们的图片 小于多少k的时候 用base64 来转换
                    // 否则用 file-loader 来产生真实的图片
                    loader: "url-loader",
                    options: {
                        limit: 1
                    }
                }
            },
复制代码

图片放到 img 文件夹下面：

在配置文件中的 图片 规则中加上一个输出的路劲：

 		{
                test: /.(png|jpg|gif)$/,
                use: {
                    // 做一个限制，当我们的图片 小于多少k的时候 用base64 来转换
                    // 否则用 file-loader 来产生真实的图片
                    loader: "url-loader",
                    options: {
                        limit: 1,
                        outputPath: 'img/' //这样打包的图片就会放到 img 文件夹下面
                    }
                }
            },
复制代码

这样就会把图片生成到 img 文件夹下面。

css 文件生成到 css 文件夹下面：

在配置文件中，压缩 css 的插件中加入路径：

new MiniCssExtractPlugin({
            filename:'css/main.css', //抽离出来的css的文件的名字
        }),
复制代码

如何在 引用 资源的时候加上一个域名，在输出的时候加上一个公共的路径：

 output: {  //出口
        filename: 'bundle.js', //打包后的的文件名
        path: path.resolve(__dirname, 'build'),  
        publicPath: 'http://www.fanqiang.com' //加上一个公共的路径
    },
复制代码

这样的话引用的资源（css，js，img等）都会加上公共的路径。

​ 如果你只想要给某一个资源前面加上公共的路径，比如 图片上面加上公共路径，那么就不要在出口中写，只需要在 图片规则中定义即可

{
                test: /.(png|jpg|gif)$/,
                use: {
                    // 做一个限制，当我们的图片 小于多少k的时候 用base64 来转换
                    // 否则用 file-loader 来产生真实的图片
                    loader: "url-loader",
                    options: {
                        limit: 1,
                        outputPath: '/img/',
                        publicPath: 'http://www.fanqiang.com' //公共路径
                    }
                }
            },