使用 Webpack 构建项目，在网页中显示 Hello, Webpack。
运行构建前，先要完成最基础的 JavaScript 和 HTML 文件，需要如下文件：
页面入口文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
JS 函数文件 draw.js
// 操作 DOM 元素，添加内容。
function draw(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 draw 函数
module.exports = draw
JS 执行入口文件 main.js
// 通过 CommonJS 规范导入 show 函数
const draw = require('./draw.js');
// 执行 show 函数
draw('Webpack');
众所周知，Webpack 在执行构建时默认从项目根目录下的 webpack.config.js 文件读取配置，所以需要新建webpack.config.js文件，其内容如下：
const path = require('path');
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
}
};
由于 Webpack 构建运行在 Node.js 环境下，所以你懂的。npm install是少不了的。加油！你是最胖的。
外挂：
webpack.config.js根据 Npm Script 终端动态输入对应模块名称，进行定制打包构建。
const path = require('path');
// `process.argv` 属性返回数组，其中包含启动 Node.js 进程时传入的命令行参数。
const argMode = process.argv[process.argv.length - 1];
// 入口文件变量
const entry = `./${argMode}/main.js`;
module.exports = {
// JavaScript 执行入口文件
entry: entry,
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 argMode 模块 dist 目录下
path: path.resolve(__dirname, `./${argMode}/dist`),
},
// Webpack 不支持解析原生 CSS 文件。
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /\.css$/i,
// use: ['style-loader', 'css-loader']
use: [
'style-loader',
{
loader: 'css-loader',
options: {}
}
]
}
]
},
};
详解：process.argv 属性返回数组，其中包含启动 Node.js 进程时传入的命令行参数。 第一个元素将是 process.execPath。 如果需要访问 argv[0] 的原始值，请参阅 process.argv0。 第二个元素将是正在执行的 JavaScript 文件的路径。 其余元素将是任何其他命令行参数。
例子：项目是多模块的，其中一个模块名 webpackLoader。传参命令如下：
npm run start -- --name webpackLoader 在这里要格外注意 --name 参数前面的 -- 分隔符，意指要给 npm run start 实际指向的命令传递额外的参数。
