Webpack 从入门到实战：安装、配置与模块打包详解

一、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
            }
        })
    ]

执行 npm run prod 命令。

四、webpack1和webpack2的区别

Webpack1.0 已废弃，建议使用 webpack2.0+。

1、resolve.modulesDirectories 被重命名为 resolve.modules。

2、module.loaders 将继续支持，但未来将被 module.rules 替换。

以上就是 webpack 安装配置及使用教程详解的详细内容，更多关于 webpack 安装配置教程的资料请关注本站其它相关文章！

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

一、webpack介绍

1、由来

2、介绍

3、作用

4、拓展说明

5、webpack 整体认知

二、webpack安装

1、安装node

2、安装cnpm

3、安装nrm的两种方法

4、安装webpack

三、webpack配置

搭建项目结构

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

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

3、当前项目结构

4、实现CSS打包

5、实现SCSS打包

6、实现Less打包

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

使用注意事项

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

9、ES6转换为ES5语法

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

11、抽取CSS为单独文件

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

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

四、webpack1和webpack2的区别

实用工具推荐