共计 1949 个字符，预计需要花费 5 分钟才能阅读完成。
首先看一些核心概念：
1.Entry 从 webpack4 开始，不再必须定义 entry point(入口点)：它将默认为 ./src/index.js。
2.Output 输出属性规定哪里创建以及如何命名输出文件。默认./dist/main.js 为主输出文件和./dist 任何其他生成文件的文件夹。
3.Loaders 使用加载器来预处理文件。（如 babel-loader、css-loader）
4.Plugins 插件利用 webpack 的编译过程执行一些任务，如优化、环境变量配置
5.Mode 通过设定 mode 参数设置为 development，production 或者 none。启用对应于每个环境的 WebPack 内置的优化。
6.Browser Compatibility webpack 支持所有符合 ES5 标准的浏览器（不支持 IE8 及以下版本）。如果要支持旧版浏览器，则需要加载 polyfill 以支持一些新的语法。
使用 init 初始化 package.json。
npm init -y安装 webpack、webpack-cli 模块
npm i webpack --save-dev在 src 目录下新建 index.js 作为入口文件。此时运行 npm run build 会发现已经有了 dist 目录。
此时虽然输出了 ./dist/main.js，但是控制台提醒 ’mode’ 使用哪种模式（production(生产) 和 development(开发) 模式。）。
webpack.config.js
module.exports = {entry: './src/index.js' // 需要打包的文件入口};
开箱即用，webpack 不需要您使用配置文件。但是，它将假定您的项目的入口点为 src/index 并将结果 dist/main.js 缩小并优化生产。
使用 webpack 编译的代码中可用的所有方法。使用 webpack 捆绑应用程序时，您可以选择各种模块语法样式，包括 ES6，CommonJS 和 AMD，推荐使用 ES6。
// 3 种模块化规范
//AMD
define(function() {return function(a, b) {return a + b}
})
require(['./module/amd'], function(amd) {console.log(amd(1, 2))
})
//commonJS
module.exports = function(a, b) {return a + b}
let common = require('./module/common')
console.log(common(1, 2))
//ES6
export default function(a, b) {return a + b}
import es6 from './module/es6'
console.log(es6(1, 2)) webpack.config.js
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {app: './app.js' // 需要打包的文件入口},
output: {
publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址
path: path.resolve(__dirname, 'dist'), // 打包文件目录
filename: 'bundle.js' // 打包后的 js 文件
},
rules: [
{
test: /\.js$/, // 使用正则来匹配 js 文件
exclude: /node_modules/, // 排除依赖包文件夹
use: {loader: 'babel-loader' // 使用 babel-loader}
}
],
"browserslist": [
"> 1%",
"last 2 version",
"not ie <= 8"
],
plugins: [new CleanWebpackPlugin(), // 默认情况下，此插件将删除 webpack output.path 目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。new HtmlWebpackPlugin({
// 打包输出 HTML
title: '自动生成 HTML',
minify: {
// 压缩 HTML 文件
removeComments: true, // 移除 HTML 中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true // 压缩内联 css
},
filename: 'index.html', // 生成后的文件名
template: 'index.html' // 根据此模版生成 HTML 文件
})
]
}
参考链接：webpack 指南
参考链接：实例带你入门并掌握 Webpack4
