共计 2358 个字符，预计需要花费 6 分钟才能阅读完成。
本地安装 webpack
npm install –save-dev webpack
如果使用 webpack4+ 版本，需要安装 webpack-cli
npm install webpack webpack-cli –save-dev
初始化 npm
初始化 npm 后，会生根目录下成一个 package.json
npm init -y
创建文件目录，文件，内容
文件结构
webpack
|-/src
|-index.js
|-index.html
|-package.json
src/index.js
function component () {
var ele = document.createElement(‘div’)
// Lodash[Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
// Lodash 的模块化方法 非常适用于：
// 遍历 array、object 和 string
// 对值进行操作和检测创建符合功能的函数 https://www.lodashjs.com/]（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
return element;
}
document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title> 起步 </title>
<script src=”https://unpkg.com/lodash@4.16.6″></script>
</head>
<body>
<script src=”./src/index.js”></script>
</body>
</html>
package.json 实际情况中，json 文件中不允许有注释，如果有注释，会导致安装不了依赖
{
…
“name”: “webpack”,
“version”: “1.0.0”,
// “main”: “index.js”, // 并且移除 main 入口
“private”: true, // 以便确保我们安装包是私有的 (private) 这可以防止意外发布你的代码
…
}
总结：通过 script 脚本引入三方资源会带来一些问题，如下：
无法立即体现，脚本的执行依赖于外部扩展库 (external library)
如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行
如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码
使用 webpack 来管理这些脚本
创建一个 bundle 文件
调整目录结构
webpack
|-/src “ 源 ” 代码，用于书写和编辑的代码
|-index.js
|-/dist “ 分发 ” 代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载
|-index.html
|-package.json
不再使用 script 引入三方资源，要在 index.js 中打包 lodash 依赖，安装 lodash
npm install –save-dev lodash
修改 src/index.js 文件
// 不再使用 script 引入 lodash 本地已安装 loadash, 使用 import 引入 lodash
import _ from ‘lodash’
function component () {
var ele = document.createElement(‘div’)
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
return element;
}
document.body.appendChild(component());
修改 dist/index.html 文件
<!doctype html>
<html>
<head>
<title> 起步 </title>
<!– 因为现在是通过 import 引入 lodash，所以将 lodash <script> 删除 –>
<!– <script src=”https://unpkg.com/lodash@4.16.6″></script> –>
</head>
<body>
<!– 然后修改另一个 <script> 标签来加载 bundle，而不是原始的 /src 文件 –>
<script src=”main.js”></script>
<!– <script src=”./src/index.js”></script> –>
</body>
</html>
执行 npx webpack, 构建成功后，在浏览器中打开 index.html
使用一个配置文件
新增 webpack.config.js
const path = require(‘path’)
module.exports = {
entry: ‘./src/index.js’, // 入口文件
output: {// 构建后的 bundle.js 文件输出到 dist 文件中
filename: ‘bundle.js’,
// _dirname 表示当前文件所在的目录的绝对路径
path: path.resolve(_dirname, ‘dist’)
}
};
再次 npx webpack –config webpack.config.js 使用 cli（npx webpack）来运行本地 node_module/.bin/webpack 文件, 反正我是一直没有构建成功，可能是本地环境问题。QAQ ===
使用 npm 脚本
太好了，还好还有另外一种方式，555，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本 (npm script)package.json【package.json 文件中不能有注释】
{
…
“scripts”: {
“test”: “echo “Error: no test specified”” && exit 1″”