本地安装webpacknpm install –save-dev webpack如果使用webpack4+版本，需要安装webpack-clinpm install webpack webpack-cli –save-dev初始化npm初始化npm后，会生根目录下成一个package.jsonnpm init -y创建文件目录，文件，内容文件结构webpack|-/src |-index.js|-index.html|-package.jsonsrc/index.jsfunction 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 依赖，安装lodashnpm install –save-dev lodash修改src/index.js文件// 不再使用script引入lodash 本地已安装loadash,使用import引入lodashimport _ 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.jsconst 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"”