本地安装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

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引入lodashimport _ from 'lodash'function component () {  var ele = document.createElement('div')  element.innerHTML = _.join(['Hello', 'webpack'], ' ');  return element;}document.body.appendChild(component());

修改dist/index.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......

解决方法：

1. 全局安装webpack-cli

   cnpm i webpack-cli -g

2. 在项目里再做一个本地安装

   cnpm i webpack -D

3. 运行cnpm run build 谢天谢地，终于可以了，构建成功了

   

   查看项目目录，会输出一个压缩了的bundle.js文件到dist文件夹中

   

到此已经实现了一个基本的构建过程，你应该移至下一章节的管理资源指南，以了解如何通过 webpack 来管理资源，例如图片、字体。