webpack（1）之基本配置

Love The Way You Lie 2022-01-20 08:01 159阅读 0赞

#### 简介 ####

webpack是一个模块打包机，它会从指定入口文件开始，递归的寻找JavaScript模块以及其他一些浏览器无法直接运行的扩展语言（Sass， TypeScript）等，将其打包成合适的格式以供浏览器使用。  
  它的作用有代码转换（利用各种loader将浏览器无法识别的语言转换成合适的格式），文件优化（比如说打包时压缩体积），代码分割，模块合并，自动刷新（热更新），代码校验，自动发布。 引用了网上的一张图来大致看一下webpack的运行机制：

#### webpack的一些基本配置 ####

首先是安装webpack，在本地项目文件夹下npm init初始化之后，下载webpack以及webpack-cli：

npm init
    npm i webpack webpack-cli -D
    复制代码

此时在文件夹下建立一个src文件夹，用于放置项目代码。webpack此时可以进行0配置打包，在命令行输入`npx webpack`可以打包出一个dist文件夹，下面又一个main.js就是打包后的文件。这个打包后的文件内容，就是使用递归的方式解析src中的js模块，递归的方法名为\_\_webpack\_require\_\_，它支持我们在浏览器中使用CommonJs规范。   当然我们不可说直接就0配置打包一个项目，下面我总结一下webpack中常用的一些基本配置。

##### webpack.config.js #####

webpack中默认的配置文件名为webpack.config.js，在根目录下建立一个名为webpack.config.js的文件，就可以在这个文件中写配置项。当然webpack也提供给我们修改这个文件名的一些方法：  
  （1）打包时输入命令`npx webpack --config webpack.config.my.js`。  
  （2）为了不用每次都在命令行输出一串这么长的命令，在package.json中配置scripts，`"build" : "webpack --config webpack.config.my.js"`。  
  先在webpack.config.my.js进行一些基本的配置：

//webpack是用node写的
    let path = require('path');
    module.exports = {
        mode: 'development', //模式 生产环境production 开发模式development
        entry: './src/index.js', //入口
        output: { //出口
            filename: 'bundle.[hash:8].js', //打包后的文件名,[hash]每次打包生成新的文件
            //__dirname以当前目录解析成绝对路径
            path: path.resolve(__dirname, 'dist') ///路径必须是绝对路径，因此需要一个node模块来辅助配置 path.resolve把相对路径解析成绝对路径
        }
    } 
    复制代码

##### webpack-dev-server #####

用webpack-dev-server搭建一个服务器，使得我们不用真实的打包，而是在内存中打包，放置到devSever服务器上，以便我们在开发时调试测试整个项目。  
  下载webpack-dev-server：

npm i webpack-dev-server -D  
    复制代码

之后，先在package.json中配置scripts，`"dev" : "webpack-dev-server --config webpack.config.my.js"`。然后配置一下devServer中的一些配置项：

devServer: { //开发服务器的配置
        port: 8889, //端口号
        progress: true, //进度条
        contentBase: './dist', //指定了服务器资源的根目录，但是在开发过程不会真实打包，因此我们会用到HtmlWebpackPlugin插件
        compress: true //启用 gzip 压缩
    },
    复制代码

##### HtmlWebpackPlugin插件 #####

定义一个html模版，可以在开发时和真实打包时都生成一个html文件，引用打包后的js文件。

let HtmlWebpackPlugin = require('html-webpack-plugin');  
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模版文件的位置
            filename: 'index.html', //打包出来html文件的名称
            minify: {
                removeAttributeQuotes: true, // 去除双引号
                collapseWhitespace: true, //变成一行
            },
            hash: true //添加一个hash戳
        })
    ],
    复制代码

##### 样式设置（css-loader，style-loader，less-loader） #####

webpack默认只支持js模块，如何解析CSS模块呢，我们会用到各种loader。首先要知道在html文件中是不能用link直接引入css文件的，因为它只是一个模版文件，它会原封不动的打包到内存或dist文件夹中。我们在JS中通过require引入css文件，还可以在css中通过import其他的css文件。

module: {
        rules: [ 
            //css-loader 主要是解析css文件中的@import语法的
            //style-loader 把css插入到head的标签中
            //loader的特点 希望单一
            //loader的用法。字符串只用一个loader 多个loader需要用数组 loader的顺序 默认从右向左 从下往上执行
            {
                test: /\.css$/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt: 'top'//插在最上面，让自己写在模版html<style>标签中的样式优先级较高
                    }
                }, 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt: 'top'
                    }
                }, 'css-loader', 'less-loader']
            }
        ]
    }
    复制代码

如下图所示，head标签下面的三个样式是分别在.css和.less文件中定义的样式，而/head标签上面的一个样式是在模版html中自己设定的。

当然此时还有一个问题，样式会以style的方式打包到html文件中。因此我们可以使用MiniCssExtractPlugin插件将这里边的样式抽离出来成一个css文件，以link的方式引入。还可以用一个autoprefixer包和一个postcss-loader自动添加浏览器前缀。

npm i mini-css-extract-plugin -D
    new MiniCssExtractPlugin({
        filename: 'main.css'
    })
    module: {
        rules: [ 
            {
                test: /\.css$/,
                use: [
                MiniCssExtractPlugin.loader, //把style-loader换成MiniCssExtractPlugin.loader
                'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                MiniCssExtractPlugin.loader, 
                'css-loader', 
                'less-loader'
                ]
            }
        ]
    }
    复制代码

npm i postcss-loader autoprefixer -D
    //在根目录创建postcss.config.js文件
    module.exports = {
        plugins: [require('autoprefixer')]
    }
    //并改变loader顺序
    module: {
        rules: [  
            {
                test: /\.css$/,
                use: [
                MiniCssExtractPlugin.loader, 
                'css-loader', 
                'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                MiniCssExtractPlugin.loader, 
                'css-loader', 
                'less-loader', 
                'postcss-loader'
                ]
            }
        ]
    }
    复制代码

进行到这一步会发现，生产模式下打包出来的main.css也没有被压缩,是因为用了MiniCssExtractPlugin这个插件不会压缩css，需要自己压缩。使用OptimizeCSSAssetsPlugin插件配置优化项，但是使用这个插件之后，css确实压缩了，但js又不会压缩了，因此还要用到UglifyJsPlugin再来压缩js。

npm i optimize-css-assets-webpack-plugin -D
    npm i uglifyjs-webpack-plugin -D
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true, //缓存
                parallel: true, //并发压缩
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    }
    复制代码

##### 转换es6语法及校验 #####

es6语法转换成es5用到了babel-loader：

npm i babel-loader @babel/core @babel/preset-env -D
    {
        test: /\.js$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: [
                    '@babel/preset-env'
                ]
            }
        }
    }
    复制代码

一些es7的提案如class,则还需要用到@babel/plugin-proposal-class-properties，装饰器则需要用到@babel/plugin-proposal-decorators：

npm i @babel/plugin-proposal-class-properties -D npm i @babel/plugin-proposal-decorators -D {
        test: /\.js$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: [
                    '@babel/preset-env'
                ],
                plugins: [
                    ['@babel/plugin-proposal-decorators', { "legacy": true }],
                    ['@babel/plugin-proposal-class-properties', { "loose": true }],
                    ['@babel/plugin-transform-runtime'] //generator
                ]
            }
        }
    }
    复制代码

generator函数使用的话，需要下载@babel/plugin-transform-runtime，还有一些es7的补丁需要下载：

npm i @babel/plugin-transform-runtime -D
    npm i @babel/runtime -S
    npm i @babel/polyfill -D
    复制代码

js语法的校验用到了eslint以及eslint-loader，他的官网为`https://eslint.org`，eslint在使用时需要配置一个.eslint.json的规则文件放在根目录，具体配置项见官网。

npm i eslint eslint-loader -D
    {
        test: /\.js$/,
        use: {
            loader: 'eslint-loader',
            options: {
                enforce: 'pre' //在普通loader之前执行
            }
        },
    }
    复制代码

##### 全局变量的引入 #####

引入全局变量有三种方式，假如要在全局引入jquery库：

1.  使用内联loader expose-loader将jquery暴露到window属性上。

import $ from 'jquery'
    require(expose-loader)
    console.log(window.$)
    复制代码

1.  使用webpack.providePlugin插件将$注入到每个模块。

new webpack.providePlugin(
        {
        $:'jquery'}
    )
    复制代码

1.  引入jquery的cdn。

##### 打包图片 #####

图片引入有三种方式：

1.  在js中创建图片来引入，打包时要用到file-loader来解析图片地址加hash戳。

const logo = require('./01.jpg') //把图片引入，返回的结构是一个新的图片地址
    const image = new Image();
    console.log(logo); //用到file-loader 默认会在内部生成一张图片，到build目录下 把生成的图片的名字返回回来
    image.src = logo;
    document.body.appendChild(image)
    复制代码

1.  在css中添加图片，打包时css-loader会将url('./01.jpg')解析为url(require('./01.jpg'))。

body {
        background: red;
        background: url('./01.jpg')
    }
    复制代码

1.  在html中通过图片的img标签引入图片，打包时需要用到html-withimg-loader来解析图片地址。

<img src="./01.jpg" alt="">
    复制代码

另外为了性能考虑，还可以使用url-loader将图片转化为base64编码，而不用生成http请求。当然生成base64编码的图片会使打包后的文件体积变大，因此两者性能需要权衡。

{
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 200 * 1024,//小于200k使用url-loader，大于200k使用file-loader
            }
        }
    },
    复制代码

也可以做如下配置，使得打包时另外生成一个img文件夹。

{
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 1,
                outputPath: '/img/'
            }
        }
    },
    复制代码