标签：

webpack 4常用

初始化

npm init // Webpack 4.0以后需要单独安装 npm install webpack webpack-cli --save-dev

基础的config

entry: ‘./src/index.js‘, mode: ‘development‘, output: { filename: ‘main.js‘, path: path.resolve(__dirname, ‘dist‘) }

字段说明

entry ： 入口文件。一般是一个string，多个可以使用数组或者json

entry:"a.js"; entry:["a.js","b.js"]; entry:{ index:["a.js"], index2:["b.js"] }

output : 出口文件 json 

output : { fileName:"a.js", path:path.resolve(__dirname,"dist"); }

mode 提供 mode 配置选项

mode : production; mode : development;

loader 用于对模块的源代码进行转换

module:{ rules:[ { test:/\.css$/, use:[ { loader:"style-loader" }, { loader: ‘css-loader‘, options: { modules: true } } ] } ] }

plugin 插件目的在于解决 loader 无法实现的其他事。

plugin : [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: ‘./src/index.html‘}) ]

webpack常用

module.noParse

防止 webpack 解析那些符合匹配条件的文件，忽略的文件夹中不应该含有 import、require、define的调用，或任何其他导入机制，忽略的 library 可以提高构建效率。

开启sourceMap

css在cssloader的option设置{sourceMap:true},js在 devtool: ‘inline-source-map‘

module.exports = { entry:"./index.js", output:{ filename:"[name].js" }, module:{ rules:[ { test:/\.(sc|c|sa)ss$/, use:[ { loader:"css-loader", options:{ sourceMap: true } } ] } ] }, devtool:"source-map" }

devtool可选值

1. source-map 2. inline-source-map 3. inline-cheap-source-map 4. inline-cheap-module-source-map 5. eval

热更新(webpack.HotModuleReplacementPlugin)

const webpack = require(‘webpack‘); module.exports = { devServer: { contentBase: path.join(__dirname, ‘dist‘), //本地服务器所加载的页面所在的目录 clinetLogLevel: ‘warning‘, // 可能值有 none, error, warning 或者 info (默认值) hot:true,//启动热更新替换特性，需要配合 webpack.HotModuleReplacementPlugin 插件 host:‘0.0.0.0‘, // 启动服务器的 host port:7000, // 端口号 compress:true, // 为所有服务启用gzip压缩 overlay: true, // 在浏览器中显示全屏覆盖 stats: "errors-only" ,// 只显示包中的错误 open:true, // 启用“打开”后，dev服务器将打开浏览器。 proxy: { // 设置代理 "/api": { target: "http://localhost:3000", pathRewrite: {"^/api" : ""} } } }, plugins::[ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ] } // package.json { ..... script:{ "dev":"webpack-dev-server --config webpack.dev.js" } ..... }

别名替换（resolve.alias）

给定对象的键后的末尾添加 $，以表示精准匹配

module.exports = { resolve:{ alias:{ ‘@src‘:path.resolve(__dirname, ‘src/‘) } } }

resolve 可配置参数：

aliasFields 

enforceExtension如果设置为true则不许可引入无扩展名的文件 例如 false可以使用require("./index") true 则必须require("./index.js");

extensions 自动解析确定扩展名 默认值为 [".js",".json"]，在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。

css单独打包（mini-css-extract-plugin）

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); module: { rules: [ { test: /\.(sc|c|sa)ss$/, use: [ MiniCssExtractPlugin.loader, { loader:"css-loader", options:{ sourceMap: true } }, ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: ‘[name].css‘, // 最终输出的文件名 chunkFilename: ‘[id].css‘ }) ]

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