GitHub 完整配置文件地址： https://github.com/yhtx1997/webpack4-Instance 由于篇幅过长分三次发布，建议按顺序看[ webpack4 ] 配置属于自己的打包系统教程（一）—— 基础配置篇[ webpack4 ] 配置属于自己的打包系统教程（二）—— 资源配置篇[ webpack4 ] 配置属于自己的打包系统教程（最终篇）—— 环境配置篇资源配置篇资源配置篇ES6 -> ES5提取 css 到单独文件css 浏览器兼容前缀补全css 代码压缩使用 sass使用 HTML 模板清理旧的打包文件静态资源加载与解析通过下面的配置 可以在 js 里引入相应的文件，然后进行解析 也可以直接解析相应的文件配置 babel 将 ES6 转换为兼容性语法（低版本语法 ES5 或 ES3）安装 babel-loadernpm install -D babel-loader @babel/core @babel/preset-env babel-loader：使用 Babel 转换 JavaScript 依赖关系的 Webpack 加载器@babel/core： 将 ES6 代码转换为 ES5@babel/preset-env： 决定使用哪些 api 为旧浏览器提供现代浏览器的新特性module: { rules: [ { test: /.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: ‘babel-loader’, options: { presets: [’@babel/preset-env’] } } } ]}加载 css安装提取 css 相关的 npm 包npm install style-loader css-loader -D提取 css 相关配置const path = require(‘path’);module.exports = { entry: { 2048: ‘./src/js/2048.js’, 1024: ‘./src/js/1024.js’, 512: ‘./src/js/512.js’ }, output: { filename: “[name].js”, path: path.resolve(__dirname, ‘dist’) }, module: { rules: [ { test: /.css$/, //匹配所有以 .css 为后缀的文件 use: [//使用以下loader来加载 ‘style-loader’, ‘css-loader’ ] } ] }}安装 sass开发 css 现在多数使用 sass 和 lass ，所以配置下 sass 相应的安装 lass 只需要把 sass-loader 切换为 less-loadernpm install sass-loader node-sass -D配置{ test: /.scss$/, use: [ “style-loader”, “css-loader”, “sass-loader” ]}CSS 分离成文件方案一 安装 extract-text-webpack-plugin方案一简单写下，推荐方案二npm install extract-text-webpack-plugin -Dextract-text-webpack-plugin 提取 css 到单独文件配置const ExtractTextPlugin = require(“extract-text-webpack-plugin”);plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title:‘2048’, template: ‘./src/index.html’, minify:true, hash:true }), new ExtractTextPlugin({ filename: ‘css/[name].css’ }),],module: { rules: [ { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: “style-loader”, use: [“css-loader”,“sass-loader”] }) }, ]}方案二 安装 MiniCssExtractPlugin 推荐与extract-text-webpack-plugin相比异步加载没有重复的编译（性能）更容易使用特定于CSSnpm install mini-css-extract-plugin postcss-loader autoprefixer postcss optimize-css-assets-webpack-plugin -Dmini-css-extract-plugin 提取 css 到单独文件autoprefixer 浏览器兼容前缀补全（例如 -webkit-）optimize-css-assets-webpack-plugin 代码压缩配置const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);const OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”);optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true // set to true if you want JS source maps }), new OptimizeCSSAssetsPlugin({}) ] },plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title:‘2048’, template: ‘./src/index.html’, minify:true, hash:true }), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: “css/[name].css” })],module: { rules: [ { test: /.scss$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader’, ‘postcss-loader’, ‘sass-loader’, ] }, ] }这里需要注意的是需要新建一个 postcss.config.js 文件,用来配置自动加前缀module.exports={ plugins: [ require(‘autoprefixer’)({ /* …options */ }) ]}加载数据数据文件包括 JSON 文件，CSV、TSV 和 XML JSON 默认就是支持的，所以如果需要处理剩下的使用下面的方法就可以了安装提取 数据 相关的 npm 包npm install csv-loader xml-loader -D安装提取 数据 相关的 npm 包{ test: /.(csv|tsv)$/, use: [ ‘csv-loader’ ]},{ test: /.xml$/, use: [ ‘xml-loader’ ]}加载其他资源加载其他静态资源都可以使用 file-loader 来加载npm install file-loader -D加载图片{ test: /.(png|svg|jpg|gif)$/, use: [ ‘file-loader’ ]}加载字体{ test: /.(woff|woff2|eot|ttf|otf)$/, use: [ ‘file-loader’ ]}设定 HtmlWebpackPlugin当我们真正应用我们写的代码时，需要我们新建 HTML ，并且需要我们手动的在 HTML 里引入，使用 HtmlWebpackPlugin 可以让我们不用每次都新建 HTML 以及 手动去引入我们的代码 它会帮我们每次运行 webpack 时新建一个 HTML 并引入所有打包好的 js css安装npm install html-webpack-plugin -D配置 HTML 模板const HtmlWebpackPlugin = require(‘html-webpack-plugin’);//引入HtmlWebpackPlugin//官网是将其放到了入口 entry 与出口 output 之间plugins: [ new HtmlWebpackPlugin({ title: ‘Output Management’，//表示 HTML title 标签的内容 template: ‘./src/index.html’,//表示模板路径 minify: true,//压缩代码 hash: true//加上哈希值来达到去缓存的目的 })]清理 ./dist 文件夹如果我们使用了哈希值来命名我们的文件，那么每次更该内容都会生成新的文件，同时旧的文件依然存在，这样的话一个是乱，一个是浪费 我们可以使用 CleanWebpackPlugin 在每次打包时都会将之前的旧文件清除掉安装npm install clean-webpack-plugin -D配置const CleanWebpackPlugin = require(‘clean-webpack-plugin’);plugins: [ new CleanWebpackPlugin([‘dist’]),//删除dist new HtmlWebpackPlugin({ title: ‘Output Management’，//表示 HTML title 标签的内容 template: ‘./src/index.html’,//表示模板路径 minify: true,//压缩代码 hash: true//加上哈希值来达到去缓存的目的 })]