本地安装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.jsonsrc/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",
"build": "webpack" // 添加一个 npm 脚本(npm script)
},
...
}现在我们就可以使用npm run build 命令，来代替npx命令，这里遇到一点问题QAQ
在执行cnpm run build总是会出现One CLI for webpack must be installed. These are recommended choices......
解决方法：
-
全局安装webpack-cli
cnpm i webpack-cli -g -
在项目里再做一个本地安装
cnpm i webpack -D - 运行cnpm run build 谢天谢地，终于可以了，构建成功了
查看项目目录，会输出一个压缩了的bundle.js文件到dist文件夹中
到此已经实现了一个基本的构建过程，你应该移至下一章节的管理资源指南，以了解如何通过 webpack 来管理资源，例如图片、字体。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。