Webpack 安装配置及核心使用教程详解

作者：工具箱时间：2026-10-25 13:32:06浏览：83

本文详细解析 Webpack 的安装配置与核心使用。涵盖从 Node.js 环境搭建到全局及本地安装，深入讲解 Entry、Loader、Plugin 三大核心概念。通过 CSS、SCSS、图片打包及 ES6 转译等实战案例，演示如何配置开发环境与生产环境分离，实现代码压缩、热更新及按需加载，帮助开发者掌握前端自动化构建流程。

一、webpack介绍

1、由来

早期前端开发中，JS、CSS 和图片文件需要手动进行压缩和打包，团队处理流程繁琐。Instagram 团队为自动化这些工作，推动了 webpack 的诞生。

2、介绍

Webpack 是一个模块打包器（module bundler）。它将 HTML、JS、CSS、图片等文件视为资源，每个资源文件都是一个模块（module）。Webpack 根据模块间的依赖关系，将所有模块打包（bundle）在一起。

3、作用

兼容 CommonJS、AMD 和 ES6 语法。
支持 JS、CSS、图片等资源文件的打包，适合团队化开发。
例如，多人编写的 JS 文件合并变得简单，无需手动处理。
提供独立的配置文件 webpack.config.js。
可将代码切割为不同的 chunk，实现按需加载，降低初始化时间。
拥有强大的 Plugin（插件）接口，多数为内部插件，使用灵活。
……

4、拓展说明

CommonJS、AMD、CMD 是 JavaScript 模块管理的三大规范。CommonJS 定义同步加载，偏向服务器端（也可用于浏览器），主要用于 Node.js。根据该规范，一个文件即一个模块，通过 require() 方法加载，该方法读取并执行文件，返回 exports 对象。

AMD 和 CMD 定义异步加载，适用于浏览器端，旨在解决 JavaScript 模块化开发问题。浏览器使用 CommonJS 同步加载会导致性能问题，因此出现了异步加载规范。

AMD 规范通过提前加载依赖模块，由 RequireJS 在推广过程中规范化产出。

（AMD规范：https://github.com/amdjs/amdjs-api/wiki/AMD）

CMD 规范通过延迟加载依赖模块，由 SeaJS 在推广过程中规范化产出。

（CMD规范：https://github.com/seajs/seajs/issues/242）

AMD 规范和 CMD 规范的区别

对于依赖模块，AMD 是提前执行，CMD 是延迟执行。RequireJS 从 2.0 开始也支持延迟执行（取决于写法）。
CMD 推崇依赖就近，AMD 推崇依赖前置。
AMD 的 API 默认一个当多个用，CMD 的 API 严格区分，推崇职责单一。例如 AMD 中 require 分全局和局部，都叫 require；CMD 中没有全局 require，而是根据模块系统完备性，提供 seajs.use 实现加载启动。CMD 中每个 API 都简单纯粹。

webpack 和 gulp 的区别

Gulp 是前端自动化构建工具，强调前端开发工作流程。通过配置一系列 task 定义处理内容（代码压缩、合并、编译、浏览器实时更新等），并定义执行顺序，从而构建整个前端开发流程。Gulp 不能将所有模块打包到一起，也不能构建不同模块间的依赖关系。
Webpack 是 JavaScript 应用程序的模块打包器，强调前端模块化方案，侧重模块打包。可将所有资源（图片、js、css 等）视为模块，通过 loader（加载器）和 plugins（插件）处理资源，打包成符合生产环境部署的前端资源。

5、webpack 整体认知

(1)、Webpack 的核心概念分为入口 (Entry)、加载器 (Loader)、插件 (Plugins)、出口 (Output)。

一、webpack介绍

入口 (Entry)：告诉 Webpack 从哪里开始，并根据依赖关系图确定需要打包的文件内容。
加载器 (Loader)：Webpack 将 CSS、JS、Image 等资源视为模块，但只能处理 JavaScript。Loader 能将其他资源转换为模块，加入依赖树。Loader 用于对模块源代码进行转换，在 import 或“加载”模块时预处理文件。它类似其他构建工具中的“任务(task)”，提供处理前端构建步骤的强大方法。

rules: [
    {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
    }
]

插件 (Plugins)：Loader 仅处理特定类型文件，Plugin 功能更强大。Plugin 介入整个 Webpack 编译生命周期，解决 Loader 无法实现的事情。Loader 预处理文件，Plugin 后处理文件。

对 Loader 打包后的模块文件（bundle.js）进行二次优化，例如代码压缩以减小文件体积。

提供辅助开发功能：例如热更新（浏览器实时显示）。

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
]

二、webpack安装

1、安装node

使用 node -v 命令检查版本。

2、安装cnpm

https://npmmirror.com/

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用 cnpm -v 命令检查版本。

3、安装nrm的两种方法

https://www.npmjs.com/package/nrm

NRM 可切换不同 NPM 源的快捷开关，支持切换的源包括：npm、cnpm、taobao、rednpm、npmMirror、edunpm。

#第一种方法（由于是外网访问进行安装，可能会被墙）
npm install -g nrm

#第二种方法（国内的淘宝镜像，访问稳定，推荐）
cnpm install -g nrm

使用 nrm -V 命令检查版本（注意 V 是大写）。
使用 nrm ls 命令查看当前可切换的 NPM 源。
使用 npm use cnpm 命令指定要使用的 NPM 源。

4、安装webpack

全局安装

npm install --global webpack

在项目中安装最新版本或特定版本，分别执行以下命令：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

三、webpack配置

搭建项目结构

webpack（项目总目录）

dist

src

moudle1.js

function sum(x,y){
    return x + y;
}
// 导出 sum 函数
module.exports = sum;

main.js

// 1、获取index.html中的dom对象
var first = document.getElementById('first');
var btn = document.getElementById('btn');
var two = document.getElementById('two');
var res = document.getElementById('res');
btn.onclick = function(){
                var firstValue = parseFloat(first.value);
                var twoValue = parseFloat(two.value);
                //2、获取 module1.js中的 sum函数
                //http://www.ruanyifeng.com/blog/2015/05/require.html
                var sum = require('./module1.js');
                res.value = sum(firstValue,twoValue);
            }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="first">
    <input type="button" id="btn" value="+">
    <input type="text" id="two">
    <input type="button" id="btn" value="=">
    <input type="text" id="res">
    <script src="./dist/js/bulid.js"></script>
</body>
</html>

webpack.config.js(手动创建)

const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
        filename: 'bulid.js' // 制定出口文件的名称
    },

1、初始化一个项目（会创建一个package.json文件）

npm init

2、在当前的项目中安装Webpack作为依赖包

npm install --save-dev webpack

说明：

--save：将配置信息保存到package.json中。

同时 --save 也是项目生产环境依赖，项目发布后仍依赖的内容，保存在 dependencies。

例如：使用 jQuery，发布后仍依赖 jQuery，故为 dependencies。

--save-dev：是项目开发环境依赖，保存在 devDependencies 中。

例如：编写 ES6 代码并编译为 ES5 发布，Babel 属于 devDependencies。

3、当前项目结构

一、webpack介绍

4、实现CSS打包

npm install css-loader style-loader --save-dev
#或者
cnpm install css-loader style-loader --save-dev

在src—>css目录中新建main.css。

#first{
    border: 1px solid red;
}

在webpack.config.js中配置相关的loader。

const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
        filename: 'bulid.js' // 制定出口文件的名称
    },
    module:{
        rules:[
        // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            }
        ]
    }
}

在main.js中获取css目录中的main.css文件。

// 1、获取index.html中的dom对象
var first = document.getElementById('first');
var btn = document.getElementById('btn');
var two = document.getElementById('two');
var res = document.getElementById('res');
    btn.onclick = function(){
        var firstValue = parseFloat(first.value);
        var twoValue = parseFloat(two.value);
        //2、获取 module1.js中的 sum函数
        //http://www.ruanyifeng.com/blog/2015/05/require.html
        var sum = require('./module1.js');
        res.value = sum(firstValue,twoValue);
    }
    // 3、获取css目录中的main.css文件
    require('../css/main.css');

在终端中输入 webpack命令进行css文件打包。

5、实现SCSS打包

在src目录中新建 sass目录--> scss1.scss。

// scss1.scss文件
$color:purple;
#two{
    border:1px solid $color; 
}

安装对应的loader

npm install sass-loader node-sass webpack --save-dev

或者

cnpm install sass-loader css-loader style-loader node-sass webpack --save-dev

在webpack.config.js中配置相关的loader。

   const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
   // const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
   // 常量存储的是一个不可以变化的变量。
   // 
   module.exports = {
       entry:'./src/./js/main.js', // 指定入口文件
       output:{
           path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
           filename: 'bulid.js' // 制定出口文件的名称
       },
       module:{
           rules:[
           // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
           //  实现 css 打包
               {
                   test: /\.css$/,
                   use: [ 'style-loader', 'css-loader' ]
                   // test 说明了当前 loader 能处理那些类型的文件
                   // use 则指定了 loader 的类型。
                   // 注意：数组中的loader不能省略扩展名
               },
               {
                   test: /\.scss$/,
                   // 注意 是sass-loader ，不是 scss-loader
                   use: [ 'style-loader', 'css-loader', 'sass-loader' ]
               }
           ]
       }
   }

在js目录中 main.js里面引入 scss1.scss。

// 1、获取index.html中的dom对象
var first = document.getElementById('first');
var btn = document.getElementById('btn');
var two = document.getElementById('two');
var res = document.getElementById('res');
btn.onclick = function(){
    var firstValue = parseFloat(first.value);
    var twoValue = parseFloat(two.value);
    //2、获取 module1.js中的 sum函数
    //http://www.ruanyifeng.com/blog/2015/05/require.html
    var sum = require('./module1.js');
    res.value = sum(firstValue,twoValue);
}
// 3、获取css目录中的main.css文件
require('../css/main.css');
// 4、获取sass目录中的scss1.scss文件
require('../sass/scss1.scss');

在终端中输入 webpack命令进行scss文件打包。

6、实现Less打包

安装

cnpm install --save-dev

cnpm install less less-loder css-loader style-loader  webpack --save-dev

或者

cnpm install less-loader less --save-dev在webpack.config.js中配置相关的loader

在src目录中新建less目录--> less1.less。

@color:blue;
#res{
    border:1px dashed blue;
}

在webpack.config.js中配置相关的loader。

const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
        filename: 'bulid.js' // 制定出口文件的名称
    },
    module:{
        rules:[
        // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
            //  实现 css 打包
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            },
            // 实现 scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            // 实现 less 打包
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            }
        ]
    }
}

在js目录中 main.js里面引入 less1.less文件。

// 5、获取less目录中的less1.less文件
require('../less/less1.less');

7、实现打包url资源（图片、gif、图标等）功能

在src目录中新建imgs目录，放入两张不同大小的图片。

在index.html中新增 <div id="bg1"></div> <div id="bg2"></div>。

在mian.css中新增

// mian.css文件
#bg1{
    width: 200px;
    height: 200px;
    background: url('../imgs/bxg.jpg');
}
#bg2{
    width: 200px;
    height: 200px;
    background: url('../imgs/web.jpg') no-repeat;
}

使用注意事项

1. 若在页面引入图片（包括img的src和background的url），基于 Webpack 开发时会遇到问题。

2. 其中一个是引用路径问题。以 background 样式用 url 引入背景图为例，Webpack 最终将各模块打包成一个文件，样式中的 url 路径相对入口 html 页面，而非原始 css 文件所在路径，导致图片引入失败。该问题由 file-loader 解决，file-loader 可解析项目中 url 引入（不仅限于 css），根据配置将图片拷贝到相应路径，并修改打包后文件引用路径指向正确文件。

3. 另外，图片多会发很多 http 请求，降低页面性能。该问题通过 url-loader 解决。Url-loader 将图片编码生成 dataURl，相当于把图片数据翻译成一串字符，打包到文件中，只需引入该文件即可访问图片。若图片较大，编码会消耗性能。因此 url-loader 提供 limit 参数，小于 limit 字节的文件转为 DataURl，大于 limit 的仍使用 file-loader 进行 copy。

4. Url-loader 和 file-loader 是什么关系？简而言之，url-loader 封装了 file-loader。Url-loader 不依赖于 file-loader，即使用 url-loader 时只需安装 url-loader，无需安装 file-loader，因为 url-loader 内置了 file-loader。通过上述介绍，可见 url-loader 工作分两种情况：

1. 文件大小小于 limit 参数，url-loader 将文件转为 DataURL；
2. 文件大小大于 limit，url-loader 会调用 file-loader 处理，参数直接传给 file-loader。因此只需安装 url-loader 即可。

安装

cnpm install

cnpm install url-loader file-loader --save-dev

在webpack.config.js中配置相关的loader。

const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
        filename: 'bulid.js' // 制定出口文件的名称
        publicPath:'dist/'
        // path:所有输出文件的目标路径;
        // publicPath:输出解析文件的目录，url 相对于 HTML 页面
    },
    module:{
        rules:[
        // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
            //  实现 css 打包
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            },
            // 实现 scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            // 实现 less 打包
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            },
            // 实现 url 资源打包
            {
                // 图片和字体文件使用 url-loader 来处理
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        // options 为可以配置的选项
                        options: {
                            limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式（为什么                               呢？因为一个很小的图片，不值当的去发送一个请求，减少请求次                               数。）
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否                              则转为dataurl形式）
                        }
                    }
              ]
               //保证输出的图片名称与之前命名的图片名称保持一致(目前只是支持这样的写法，                   webpack3 没有响应的options进行配置)
             // use:'url-loader?limit=8192&name=imgs/[name].[ext]' 
          }
          ]
      }
  }

在main.js中引入mui目录中icons-extra.css的文件。

// 5、获取less目录中的less1.less文件
require('../less/less1.less');
// 6、获取src目录中的mui目录中icons-extra.css的文件
require('../mui/css/icons-extra.css');

8、Webpack-dev-server结合后端服务器的热替换配置

Webpack-dev-server 提供简单 web 服务器，支持实时重新加载 (live reloading)，并将生成的 js 和 html 构建到电脑内存中。即使目录中无相关 js 等文件，仍能加载，提高页面运行速度。

安装 webpack-dev-server 插件。

#先把之前依赖的包安装
cnpm install

cnpm install webpack-dev-server --save-dev

 // webpack.config.js
   const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
   // const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
   // 常量存储的是一个不可以变化的变量。
   module.exports = {
       entry:'./src/./js/main.js', // 指定入口文件
       output:{
           path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
           filename: 'bulid.js' // 制定出口文件的名称
       },
       module:{
           rules:[
           // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
               //  实现 css 打包
               {
                   test: /\.css$/,
                   use: [ 'style-loader', 'css-loader' ]
                   // test 说明了当前 loader 能处理那些类型的文件
                   // use 则指定了 loader 的类型。
                   // 注意：数组中的loader不能省略扩展名
               },
               // 实现 scss 打包
               {
                   test: /\.scss$/,
                   // 注意 是sass-loader ，不是 scss-loader
                   use: [ 'style-loader', 'css-loader', 'sass-loader' ]
               },
               // 实现 less 打包
               {
                   test: /\.less$/,
                   use: [ 'style-loader', 'css-loader', 'less-loader' ]
               },
               // 实现 url 资源打包
               {
                   // 图片文件使用 url-loader 来处理
                   test: /\.(png|jpg|gif|ttf)$/,
                   use: [
                   {
                       loader: 'url-loader',
                       // options 为可以配置的选项
                       options: {
                         limit: 8192
                         // limit=8192表示将所有小于8kb的图片都转为base64形式
                         // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                     }
                 }
                 ]
             }
             ]
         },
          devServer: {
           // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件  contentBase：告诉服务器从哪里提供内容
           // 或者通过以下方式配置
           contentBase: path.join(__dirname, "dist"),
           compress: true,
           // 当它被设置为true的时候对所有的服务器资源采用gzip压缩
           // 对JS，CSS资源的压缩率很高，可以极大得提高文件传输的速率，从而提升web性能
           port: 9000, // 如果想要改端口，可以通过 port更改
           hot: true, // 启用 webpack 的模块热替换特性()
           inline: true, // 实现实时重载（实现自动刷新功能）默认情况下是 true。
           host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
       }
    }

// package.json
   {
     "name": "mywebpack",
     "version": "1.0.0",
     "description": "",
     "main": "webpack.config.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "webpack-dev-server --open"
       // "start": "webpack-dev-server --open --port 8080 --hot --inline"  // 如果在这里配置了，就不用在webpack.config.js中配置devServer属性了。
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "css-loader": "^0.28.7",
       "file-loader": "^1.1.5",
       "html-webpack-plugin": "^2.30.1",
       "less": "^3.0.0-alpha.3",
       "less-loader": "^4.0.5",
       "node-sass": "^4.5.3",
       "sass-loader": "^6.0.6",
       "style-loader": "^0.19.0",
       "url-loader": "^0.6.2",
       "webpack": "^3.8.1",
       "webpack-dev-server": "^2.9.3"
     }
   }
   ```
-   在命令行中运行 `npm start`，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码，但是打开后发现，打开的是 dist目录，我们想要的是 index.html显示我们的页面，所以这是我们还要借助里另一个 `html-webpack-plugin` 插件。

Html-webpack-plugin 简单创建 HTML 文件用于服务器访问，包含使用 script 标签的 body 中所有 webpack 包。

安装 html-webpack-plugin 插件。

cnpm install --save-dev html-webpack-plugin

webpack.config.js配置

const path = require('path'); // 首先要引入node.js中path 模块，用于处理文件与目录的路径
// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。
// 引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    entry: './src/./js/main.js', // 指定入口文件
    output: {
        path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
        filename: 'bulid.js' // 制定出口文件的名称
    },
    module: {
        rules: [
            // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
            //  实现 css 打包
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
                    // test 说明了当前 loader 能处理那些类型的文件
                    // use 则指定了 loader 的类型。
                    // 注意：数组中的loader不能省略扩展名
            },
            // 实现 scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // 实现 less 打包
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 实现 url 资源打包
            {
                // 图片文件使用 url-loader 来处理
                test: /\.(png|jpg|gif|ttf)$/,
                use: [{
                    loader: 'url-loader',
                    // options 为可以配置的选项
                    options: {
                        limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                    }
                }]
            }
        ]
    },
    devServer: {
        // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件  contentBase：告诉服务器从哪里提供内容
        // 或者通过以下方式配置
        contentBase: path.join(__dirname, "dist"),
        port: 9000, // 如果想要改端口，可以通过 port更改
        hot: true, // 启用 webpack 的模块热替换特性()
        inline: true, // 实现实时重载（实现自动刷新功能）默认情况下是 true。
        host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '首页', // 用于生成的HTML文档的标题
            filename: 'index.html', //写入HTML的文件。默认为index.html。也可以指定一个子目录（例如：）assets/admin.html
            template: 'index.html' // Webpack需要模板的路径
        }),
        new webpack.HotModuleReplacementPlugin() // 需要结合 启用热替换模块(Hot Module Replacement)，也被称为 HMR
    ]
}

再次使用 npm start 命令即可实现浏览器自动更新。

问题来了，HtmlWebpackPlugin 中的 title 并未显示，原因需在定义的 template 模板中使用 ejs 语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- EJS 语法 
            /* EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可 */
        -->
    <title><%= htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <input type="text" id="first">
    <input type="button" id="btn" value="+">
    <input type="text" id="two">
    <input type="button" id="btn" value="=">
    <input type="text" id="res">
    <div id="bg1"></div>
    <div id="bg2"></div>
</body>
</html>

再次使用 npm start 命令即可。

9、ES6转换为ES5语法

安装

cnpm install --save-dev babel-loader babel-core babel-preset-env

babel-core：若某些代码需调用 Babel 的 API 进行转码，需使用 babel-core 模块。

babel-preset-env：根据目标浏览器或运行时环境自动确定所需 Babel 插件。

Babel 对一些公共方法使用了非常小的辅助代码，如 _extend。默认情况下会被添加到每一个需要它的文件中，可引入 babel runtime 作为独立模块，避免重复引入。

必须执行 npm install babel-plugin-transform-runtime --save-dev 将其包含到项目中。

也要使用 npm install babel-runtime --save 把 babel-runtime 安装为一个依赖。

配置

// 实现 url 资源打包
                    {
                        // 图片文件使用 url-loader 来处理
                        test: /\.(png|jpg|gif|ttf)$/,
                        use: [{
                            loader: 'url-loader',
                            // options 为可以配置的选项
                            options: {
                                limit: 8192
                                    // limit=8192表示将所有小于8kb的图片都转为base64形式
                                    // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                            }
                        }]
                    },
                    // 实现 ES6转 ES5
                    {
                        test: /\.js$/,
                        exclude: /(node_modules)/,  // exclude 排除的意思，把 node_modules文件夹排除编译之外
                        use: {
                            loader: 'babel-loader',
                            options: {
                            // presets 预设列表（一组插件）加载和使用
                            presets: ['env'],
                            plugins: ['transform-runtime'] // 加载和使用的插件列表
                            }
                        }
                    }

把一些代码改成 ES6 语法的写法。

-   ```js
    // main.js
    // 1、获取index.html中的dom对象
    var first = document.getElementById('first');
    var btn1 = document.getElementById('btn1');
    var two = document.getElementById('two');
    var res = document.getElementById('res');
    console.log(1);
    btn1.onclick = function() {
        var firstValue = parseFloat(first.value);
        var twoValue = parseFloat(two.value);
        //2、获取 module1.js中的 sum函数
        //http://www.ruanyifeng.com/blog/2015/05/require.html
        console.log(2);
        /* var sum = require('./module1.js');
         res.value = sum(firstValue,twoValue);*/
        res.value = sumObj.sum(firstValue, twoValue);
    }
    // 3、获取css目录中的main.css文件
    // require('../css/main.css');
    //  把步骤3 改为 ES6写法,引入css目录中的main.css文件
    import '../css/main.css';
    // 4、获取sass目录中的scss1.scss文件
    require('../sass/scss1.scss');
    // 5、获取less目录中的less1.less文件
    require('../less/less1.less');
    // 6、获取src目录中的mui目录中icons-extra.css的文件
    require('../mui/css/icons-extra.css');
    // 把 var sum = require('./module1.js'); 写成 ES6语法
    import sumObj from './module1.js'
    ```

// moudule1.js
function sum(x,y){
    return x + y;
}
// 导出 sum 函数
// module.exports = sum;
    // 改成ES6 的写法语法
export default{
    sum
}

10、防止文件缓存（生成带有20位的hash值的唯一文件）

// webpack.config.js
output: {
        path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
        // filename: 'bulid.js' // 制定出口文件的名称
        filename: '[name].[hash].js' // 将入口文件重命名为带有20位的hash值的唯一文件
    }

11、抽取CSS为单独文件

安装插件从 build.js文件中提取文本（CSS）到单独的文件。

npm install --save-dev extract-text-webpack-plugin

在webpack.config.js中配置。

const path = require('path'); // 首先要引入node.js中path 模块，用于处理文件与目录的路径
// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。
// 引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: './src/./js/main.js', // 指定入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 指定出口文件的路径目录
        // filename: 'bulid.js' // 制定出口文件的名称
        // path指定了本地构建地址，publicPath指定在浏览器中所引用的,指定的是构建后在html里的路径
        // publicPath: './',
        // 将入口文件重命名为带有20位的hash值的唯一文件
        filename: '[name].[hash].js' 
    },
    module: {
        rules: [
            // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
            //  实现 css 打包
            /*{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
                    // test 说明了当前 loader 能处理那些类型的文件
                    // use 则指定了 loader 的类型。
                    // 注意：数组中的loader不能省略扩展名
            },*/
            // 实现 scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // 实现 less 打包
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 实现 url 资源打包
            {
                // 图片文件使用 url-loader 来处理
                test: /\.(png|jpg|gif|ttf)$/,
                use: [{
                    loader: 'url-loader',
                    // options 为可以配置的选项
                    options: {
                        limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                    }
                }]
               //保证输出的图片名称与之前命名的图片名称保持一致(目前只是支持这样的写法，                   webpack3 没有响应的options进行配置)
                // use:'url-loader?limit=8192&name=imgs/[name].[ext]' 
            },
            // 实现 ES6转 ES5
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // exclude 排除的意思，把 node_modules文件夹排除编译之外
                use: {
                    loader: 'babel-loader',
                    options: {
                        // presets 预设列表（一组插件）加载和使用
                        presets: ['env'],
                        plugins: ['transform-runtime'] // 加载和使用的插件列表
                    }
                }
            },
            // 提取 css模块（如果使用这个模块的话，需要把之前的CSS打包模块注释掉，不然会重复）
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    devServer: {
        // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件  contentBase：告诉服务器从哪里提供内容
        // 或者通过以下方式配置
        contentBase: path.join(__dirname, "dist"),
        port: 9000, // 如果想要改端口，可以通过 port更改
        hot: true, // 启用 webpack 的模块热替换特性()
        inline: true, // 实现实时重载（实现自动刷新功能）默认情况下是 true。
        host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
    },
    plugins: [
        // 从 bundle 中提取文本（CSS）到单独的文件      
        new ExtractTextPlugin({
            //  提取css，并重名为带有 20位的hash值的唯一文件
            filename: '[name].[hash].css',
            // 将所有的独立文件模块（这里指的是css文件）合并成一个文件
            allChunks: true
        }),
        new HtmlWebpackPlugin({
            title: '首页', // 用于生成的HTML文档的标题
            filename: 'index.html', //写入HTML的文件。默认为index.html。也可以指定一个子目录（例如：）assets/admin.html
            template: 'index.html' // Webpack需要模板的路径
                // template: 'index.ejs' // Webpack需要模板的路径
        }),
        // 需要结合webpack-dev-server 启用热替换模块(Hot Module Replacement)，也被称为 HMR
        new webpack.HotModuleReplacementPlugin()
    ]
}

12、开发环境和生产环境的分离

（1）开发环境与生产环境分离的原因如下：

开发环境中使用热更新插件实现浏览器自动更新，代码未压缩，便于调试，这些不应出现在生产环境中。
生产环境中部署到服务器时，对代码进行各种优化（如压缩），不应将这些代码放入开发环境，不利于开发和调试。

总结：针对以上说明，有必要区分开发环境与生产环境。

（2）开发环境的配置和生产换环境配置的区别。

开发环境有的配置，生产环境不一定有，例如热更新时使用的 HotModuleReplacementPlugin。
生产环境有的配置，开发环境不一定有，例如压缩 js 用的 UglifyJsPlugin。

如何去做？

1> 因 Webpack 默认找 webpack.config.js 配置文件，需将开发环境的 webpack.config.js 改为 webpack.dev.config.js 代表开发环境配置。

2> 新建 webpack.prod.config.js，将开发环境的 webpack.config.js 复制进去（删除无用配置）。

3> 修改 package.json 文件（在 scripts 标签中添加 "dev" 和 "prod" 属性配置）。

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --config webpack.dev.config.js",
        "prod": "webpack --config webpack.prod.config.js"
    },

怎样执行命令

执行开发环境的中配置

npm run dev

执行生产环境的中配置

npm run prod

13、在生产环境中配置代码压缩功能

配置webpack.prod.config.js 文件。

// webpack.prod.config.js
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 // ……
   plugins: [
       // ……
        // js代码 压缩
        new UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]