Webpack：配置

webpack安装

安装本地的webpack
npm i webpack webpack-cli -D（线上环境不需要）

webpack可以进行0配置

webpack是一个打包工具——》输出后的结果是js模块
打包（支持js模块化），打包命令：npx webpack

手动配置webpack

默认配置文件的名字：webpack.config.js/webpackfile.js。如果修改默认配置文件的名字，可以：npx webpack --config webpack.config.my.js

mode模式

1、webpack.config.js配置：
    module.exports = {
        mode: 'production', // 模式
    }
   注： 通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
   development：开发模式（代码不压缩），会将process.env.NODE_ENV 的值设为 development 。启用NamedChunksPlugin 和 NamedMoudulesPlugin。
   production：生产模式（会压缩代码），会将process.env.NODE_ENV 的值设为 production 。启用FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin 和UglifyJsPlugin

入口（entry）

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值./src/index.js，可以在 webpack 的配置文件中配置入口，配置节点为：entry，当然可以配置一个入口，也可以配置多个。

1、单个入口文件
module.exports = {
   entry: './src/index.js' //单入口
}
2、多个入口文件
module.exports = {
    entry: {    //多入口
        main: './src/index.js',
        other: './src/other.js'
    } 
}

输出（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。

let path = require('path')
module.exports = {
   output: {
        filename: 'bundle.js', // 打包后的文件名
        // filename: 'bundle.[hash:8].js', // 打包后的文件名 加上hash可以防止打包文件覆盖。只显示八位
        path: path.resolve(__dirname,'build'), // 路径必须是一个绝对路径
    },
}

热部署：webpack-dev-server

webpack-dev-server会通过express(node框架)启动一个http服务。
DevServer用于提供HTTP服务、监听文件变化并实时刷新页面、支持SourceMap以方便调试。

npm i webpack-dev-server -D
启动项目：npx webpack-dev-server

1、webpack.config.js配置：
    module.exports = {
        //开发服务器配置
        devServer: {
            port: 3000,//修改端口号
            progress: true,//进度条
            contentBase: './dist',//默认访问目录
            overlay: true,//是否在页面展示错误，（创建脚手架一般都会开启）
            hot: true, //热更新
            // open: true,//自动打开浏览器
        },
    }
2、package.json文件配置：open(自动打开)
{
    "scripts": {
        "dev": "webpack-dev-server --open"
    }
}

执行：npm run dev，webpack_dev_server热部署就启动了，部署的服务器地址在localhost:8080/上

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

处理样式
当引入css文件，webpack是无法识别的，这就需要使用相应的css插件 | loader。

//css-loader：解析@import这种语法的
//style-loader：把css插入到head的标签中
//loader：特点：单一
//loader：用法：一个loader用字符串，多个loader需要[]；还可以写成对象方式
//loader：顺序：默认从右向左执行，从下到上执行
1、npm i css-loader style-loader -D
2、webpack.config.js配置：
    module.exports = {
        module: { // 模块
            rules: [ // 规则
                {
                    test:/\.css$/,
                    use: [
                        {
                            loader: 'style-loader', // 把css插入到head的标签中
                            // options: { // 解决行内样式不生效
                            //     insert: function(element) {
                            //         var parent = document.querySelector('head');
                            //         var lastInsertedElement = window._lastElementInsertedByStyleLoader;
                            //         if (!lastInsertedElement) {
                            //             parent.insertBefore(element, parent.firstChild);
                            //         } else if (lastInsertedElement.nextSibling) {
                            //             parent.insertBefore(element, lastInsertedElement.nextSibling)
                            //         } else {
                            //             parent.appendChild(element)
                            //         }
                            //     }
                            // }
                        },
                        'css-loader', // 解析@import
                        'postcss-loader', // 自动加前缀
                    ]
                },
            ]
        }
    }

解析less

1、npm i less less-loader -D
2、webpack.config.js配置：
    module.exports = {
        module: { // 模块
            rules: [ // 规则
                { // 也可以处理less文件、sass：node-sass、sass-loader;stylus：stylus、stylus-loader
                    test:/\.less$/,
                    // loaders: ['style-loader','css-loader','less-loader'] // 方式一
                    use: [  // 方式二
                        // {
                        //     loader: 'style-loader',
                        //     options: {
                        //         insert: 'top'
                        //     }
                        // },
                        MiniCssExtractPlugin.loader, // 抽离css样式
                        'css-loader', // @import 解析路径
                        'less-loader', // 把less->css
                        'postcss-loader', // 自动加前缀
                    ]
                }
            ]
        }
    }

自动加浏览器前缀

1、npm i postcss-loader autoprefixer -D
2、package.json文件配置：
    "browserslist": [
        "ie>=8",
        "Firefox>=20",
        "Safari>=5",
        "Android>=4",
        "Ios>=6",
        "last 4 version"
    ]
3、package.json同级创建配置文件：postcss.config.js。配置：
     module.exports = {
        plugins: [require('autoprefixer')]
     }
4、webpack.config.js配置：
    module.exports = {
        module: { // 模块
            rules: [ // 规则
                {
                    test: /\.css$/,
                    use: [
                        'css-loader',
                        'postcss-loader'
                    ]
                }
            ]
        }
    }

https://www.cnblogs.com/roseAT/p/12083210.html

es6转换成es5：

1、npm i babel-loader @babel/core @babel/preset-env -D
   npm i @babel/plugin-proposal-class-properties -D(用来编译类(class))
   npm i @babel/plugin-proposal-decorators -D(装饰器@Decorator)
2、webpack.config.js配置：
    module.exports = {
        module: { // 模块
            rules: [ // 规则
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        options: { // 用babel-loader：把es6->es5
                            presets: [
                                '@babel/preset-env'
                            ],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                                ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                                // '@babel/plugin-proposal-class-properties'
                            ]
                        }
                    }
                },
            ]
        }
    }

https://blog.csdn.net/weixin_43664308/article/details/94445978

插件（plugins）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

html-webpack-plugin（指定html模板）

1、npm i html-webpack-plugin -D
2、webpack.config.js配置：
    let HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        plugins: [ // 数组 放着所有的webpack插件
            new HtmlWebpackPlugin({ // 模板配置
                template: './src/index.html', // 路径
                filename: 'index.html', // 打包后的文件名
                minify: {
                    removeAttributeQuotes: true, // 移除index.html文件里的""号。
                    collapseWhitespace: true, // 折叠空行
                },
                hash: true, // hash戳：防止浏览器缓存
            }),
        ]
    }

mini-css-extract-plugin（抽离css样式）

1、npm i mini-css-extract-plugin -D
2、webpack.config.js配置：
    let MiniCssExtractPlugin = require('mini-css-extract-plugin')
    module.exports = {
        plugins: [ // 数组 放着所有的webpack插件
            new MiniCssExtractPlugin({ // 抽离css样式
                filename: 'main.css' // 抽离出来的css文件名
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        {
                           MiniCssExtractPlugin.loader,
                           'css-loader'
                        }
                    ]
                }
            ]
        }
    }

optimize-css-assets-webpack-plugin（压缩css）
uglifyjs-webpack-plugin（压缩js）

1、npm i optimize-css-assets-webpack-plugin -D
1、npm i uglifyjs-webpack-plugin -D
2、webpack.config.js配置：
    module.exports = {
        optimization: { // 优化项
            minimizer: [
                new UglifyJsPlugin({ // 压缩js
                    cache: true, // 缓存
                    parallel: true, // 并发打包
                    sourceMap: true, // 源码映射
                }),
                new OptimizeCss() // 压缩css
            ]
        },
    }

Babel优化：(es6转换es5的高级语法)避免重复引入，公共的地方进行抽离

1、npm i @babel/plugin-transform-runtime -D
1、npm i @babel/runtime
2、webpack.config.js配置：
    module.exports = {
        module: { // 模块
            rules: [ // 规则
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        options: { // 用babel-loader：把es6->es5
                            presets: [
                                '@babel/preset-env'
                            ],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                                ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                                "@babel/plugin-transform-runtime"
                            ]
                        }
                    }
                },
            ]
        }
    }

补丁模块：

1、npm i @babel/polyfill
2、需要补丁的js文件中：require('@babel.polyfill')

校验

1、npm i eslint eslint-loader -D
2、webpack.config.js配置：
    module.exports = {
        module: { // 模块
            rules: [ // 规则
                {
                    test: /\.js$/,
                    use: {
                        loader: 'eslint-loader',
                    }
                },
            ]
        }
    }

参考文件：https://www.jianshu.com/p/576310c1d3b6