安装主包

yarn add webpack webpack-cli webpack-dev-server -D

根据项目实际需求安装loaders，webpack-loaders列表

根据项目实际需求安装插件， webpack-plugins列表

常用包列表

常用配置

webpack-dev-server

module.exports = {...devServer: {// 监听端口，默认式8080port: 8080,// 指定使用一个host地址，默认式localhosthost: '0.0.0.0',// 启用https服务，开启后默认提供自制签名，也可以传入一个object提供指定证书https: true,// https: {//   key: fs.readFileSync("/path/to/server.key"),//   cert: fs.readFileSync("/path/to/server.crt"),//   ca: fs.readFileSync("/path/to/ca.pem"),// }// 静态文件根目录，可以使用数组提供多个目录，推荐使用绝对路径contentBase: path.resolve('public'),// 启动服务后是否打开浏览器，推荐使用cli方式 `--open`，可自由控制open: true,// 是否启用gzip压缩compress: true,// 启用 webpack 的模块热替换特性hot: true,// 转发请求，通常用来转发api请求proxy: {// 监听规则'/api': {/*** derServer运行在localhost的8080端口，数据服务运行在 80 端口，* 转发 /api 路径下的请求到 localhost 的80端口，* 这样可以免去服务器端的跨域设置*/// 转发地址target: 'http://localhost',// 转发规则pathRewrite: {'^/api': '/'}}}}...
}

sass-loader

module.exports = {...module: {rules: [{test: /\.scss/,use: [{ loader: 'style-loader'}, // 将 JS 字符串生成为 style 节点{ loader: 'css-loader' },  // 将 CSS 转化成 CommonJS 模块{ loader: "sass-loader" }  // 将 Sass 编译成 CSS]}]}...
}

clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {...plguins: [new CleanWebpackPlugin() // 默认情况下会删除配置 output.path 目录中的所有文件]...
}

html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {...plguins: [new HtmlWebpackPlugin({// html document的title，默认为Webpack Apptitle: '', // 输出的html的文件名称filename: '',// html模板所在的文件路径template: '',// chunks主要用于多入口文件，选择需要编译的入口文件chunks: []})]...
}

html-webpack-inline-source-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')module.exports = {...plguins: [new HtmlWebpackPlugin({...inlineSource: '.(js|css)',...}),new HtmlWebpackInlineSourcePlugin () // 插件必需写在 HtmlWebpackPlugin 后面]...
}