Webpack笔记（一）：入门安装配置

一、局部安装介绍：

全局安装会导致不同项目中的webpack锁定到指定版本，也会导致使用不同webpack版本的项目构建失败，丧失了灵活性，因此推荐局部安装。
a. 首先确保安装了Node.js的最新版本。
b. 写这篇文章的时候，webpack已经到了4.1.0版本；
c. 要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@

二、构建项目：

a. 创建项目，初始化npm以及本地安装webpack

mkdir webpack-test && cd webpack-test
npm init -y
npm install --save-dev webpack

b. 创建以下项目结构

webpack-test
|-package.json
|-dist        // 构建后（产生的代码最小化以及优化）输出的分发代码
  |-index.html
|-src         // 用于书写和编辑的源代码
  |-index.js

c. 让我们先按照之前的方法来进行编写：

/src/index.js

function createComponent() {
  var ele = document.createElement('div');
  ele.innerHTML = 'hello world';
  // 此处依赖于jquery
  $('#root').append(ele);
}

createComponent();

/dist/index.html



  
    
    webpack test

打开/dist/index.html，会发现页面上出现了 "hello world" 字样。
但，此示例中script标签之间存在隐式（假设已经存在jquery全局变量）依赖，index.js的执行必须依赖jquery文件。这种JavaScript的管理方式存在一些问题：
① 如果依赖过多会导致管理混乱，缺乏灵活性；
② 如果依赖不存在或者引用顺序错误，会导致程序无法执行；
③ 如果依赖被引入但没有使用，浏览器将被迫下载无用代码；

d. 使用webpack构建项目：

保持项目结构不变，将文件做以下修改：
/src/index.js

// 通过显示声明依赖，webpack通过这些信息来构建依赖图
// 然后使用图去生成一个优化过的，按照正确顺序执行的bundle
+ import $ from 'jquery';

  function createComponent() {
    var ele = document.createElement('div');
    - ele.innerHTML = 'hello world';
    + ele.innerHTML = 'hello webpack';
    // 此处依赖于jquery
    $('#root').append(ele);
  }

  createComponent();

/dist/index.html
由于通过import来引入jquery，所以在index.html中需要将外部引入jquery的


- 
+

然后执行CLI命令：

 .\node_modules\.bin\webpack [entry] [output]

在项目的根目录下打开命令行工具，然后键入：

 .\node_modules\.bin\webpack src/index.js dist/bundle.js

如果看到类似如下信息，即为构建成功

 Asset    Size  Chunks                    Chunk Names
bundle.js  275 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 201 bytes {0} [built]
    + 1 hidden module

此时再打开/dist/index.html目录即可看到 "hello webpack" 字样

e. 使用一个配置文件：

大多数项目会有一个很复杂的配置，在命令行里输入大量配置并不是一个很好的选择，因此需要一个配置文件。
在项目的根目录下增加一个webpack.config.js：

  webpack-test
  |-package.json
+ |-webpack.config.js
  |-dist        // 构建后（产生的代码最小化以及优化）输出的分发代码
    |-index.html
  |-src         // 用于书写和编辑的源代码
    |-index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: { 
    filename: 'bundle.js',  // 输出文件名
    path: path.resolve(__dirname, 'dist')  // 输出到dist目录下
  }
}

然后在命令行内执行如下命令：

.\node_modules\.bin\webpack

如果看到跟之前类似的构建信息即为构建成功。
注意：webpack在这里默认使用了webpack.config.js，如果你不想使用它，可以在命令行内向它传递名称参数：

.\node_modules\.bin\webpack --config [configName]

f. 使用NPM脚本：

使用npm脚本（npm script）可以一次执行一个或多个webpack命令。
在项目根目录下的package.json中添加：

{
  ...
    "script": {
      "build": "webpack"
    },
  ...
}

现在，在命令行中键入npm run build即可代替之前的.\node_modules\.bin\webpack命令。传递参数的方式与后者一样。