原文地址：https://segmentfault.com/a/1190000012536871

webpack目录

本文参考文档

webpack官方安装文档 https://webpack.js.org/guides... 中文翻译
webpack-dev-server官方安装文档: https://webpack.js.org/guides...
package.json官方详解: https://docs.npmjs.com/files/...
webpack命令行各参数的用法: https://webpack.js.org/api/cli/ 中文翻译
webpack-dev-server的配置 https://webpack.js.org/config... 中文翻译
官方插件列表插件中文翻译 html-webpack-plugin插件托管地址和用法 html-loader托管地址和用法 file-loader托管地址和用法
官方网站1 官方网站2 官方文档官方教程中文版本文档

前提条件

电脑装了一个全新的nodejs，最好是LTS版本,旧的nodejs版本可能没使用webpack的新功能，也可能会丢失一些依赖的包
先安装好淘宝的cnpm，淘宝镜像方便些
我的安装环境是win10

一：安装webpack和webpack-dev-server

1.准备工作

新建项目文件夹D:\03www2018\study\webpack2017 下面简写为 根目录
新建npm配置文件package.josn,根目录>cnpm init

2.项目局部安装webpack和webpack-dev-server

不建议全局安装webpack和webpack-dev-server
局部安装webpack 根目录>cnpm i webpack -D
局部安装server 根目录>cnpm i webpack-dev-server -D
会自动生成node_modules文件夹,下有804个文件夹(485+319server)个文件夹，这些包都是webpack的依赖
package.json中增加了刚安装的包webpack的配置

"devDependencies": {

  "webpack": "^3.10.0",

  "webpack-dev-server": "^2.9.7"

}

说明1: devDependencies是开发依赖，只会在打包过程中用到，不会包含到最后的代码中
说明2: 如果想安装指定版本的webpack，使用npm install --save-dev webpack@<版本号>格式

3.熟悉webpack命令行各参数的意思

有关命令行各参数的用法，根目录>"node_modules/.bin/webpack" -h
上面这个执行webpack很不方便，修改根目录>package.json，在script加上两条

  "scripts": {

    "a" :"webpack --config ./build/webpack.dev.conf.js",

    "b" :"webpack-dev-server --config ./build/webpack.dev.conf.js",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

命令行的选项其实都可以写在配置文件webpack.config.js中，写在配置文件中更方便更强大。webpack启动时要读取配置文件，参数--config指定读取哪个配置文件，如果没有使用--config指定，会默认在根目录中找webpack.config.js或webpackfile.js这个文件,有关配置文件的命名随意定，但最好带上环境，如webpack.base|dev|prod.conf.js

01: 配置选项 Config options:

  --config       配置文件路径，字符串格式，默认是`根目录`下的 webpack.config.js 或 webpackfile.js，

  --config-name  使用配置的名字，字符串

  --env          当配置文件输出的是一个函数时，要指定，在下一节课中会介绍

02: 基本选项 Basic options:

  --context    入口文件根目录，默认为当前目录

  --entry      入口文件,这里只能是字符串，但在配置文件中还可以定义数组或对象

  --watch, -w  监视是否有文件有改动，会自动打包，默认为false

  --debug      Switch loaders to debug mode                            [boolean]

  --devtool    Enable devtool for better debugging experience (Example:

               --devtool eval-cheap-module-source-map)                  [string]

  -d           shortcut for --debug --devtool eval-cheap-module-source-map

               --output-pathinfo                                       [boolean]

  -p           shortcut for --optimize-minimize --define

               process.env.NODE_ENV="production"                       [boolean]

  --progress   Print compilation progress in percentage                [boolean]

03: 模块选项 Module options:

  --module-bind       Bind an extension to a loader                     [string]

  --module-bind-post                                                    [string]

  --module-bind-pre                                                     [string]

04: 输出选项 Output options:

  --output-path                 The output path for compilation assets

                                       [string] [default: The current directory]

  --output-filename             The output filename of the bundle

                                                   [string] [default: [name].js]

  --output-chunk-filename       The output filename for additional chunks

       [string] [default: filename with [id] instead of [name] or [id] prefixed]

  --output-source-map-filename  The output filename for the SourceMap   [string]

  --output-public-path          The public path for the assets          [string]

  --output-jsonp-function       The name of the jsonp function used for chunk

                                loading                                 [string]

  --output-pathinfo             Include a comment with the request for every

                                dependency (require, import, etc.)     [boolean]

  --output-library              Expose the exports of the entry point as library

                                                                        [string]

  --output-library-target       The type for exposing the exports of the entry

                                point as library                        [string]

05: 高级选项 Advanced options:

  --records-input-path       Path to the records file (reading)         [string]

  --records-output-path      Path to the records file (writing)         [string]

  --records-path             Path to the records file                   [string]

  --define                   Define any free var in the bundle          [string]

  --target                   The targeted execution environment         [string]

  --cache                    Enable in memory caching

                      [boolean] [default: It's enabled by default when watching]

  --watch-stdin, --stdin     Exit the process when stdin is closed     [boolean]

  --watch-aggregate-timeout  Timeout for gathering changes while watching

  --watch-poll               The polling interval for watching (also enable

                             polling)                                   [string]

  --hot                      Enables Hot Module Replacement            [boolean]

  --prefetch                 Prefetch this request (Example: --prefetch

                             ./file.js)                                 [string]

  --provide                  Provide these modules as free vars in all modules

                             (Example: --provide jQuery=jquery)         [string]

  --labeled-modules          Enables labeled modules                   [boolean]

  --plugin                   Load this plugin                           [string]

  --bail                     Abort the compilation on first error

                                                       [boolean] [default: null]

  --profile                  Profile the compilation and include information in

                             stats                     [boolean] [default: null]

06: 解析选项 Resolving options:

  --resolve-alias         Setup a module alias for resolving (Example:

                          jquery-plugin=jquery.plugin)                  [string]

  --resolve-extensions    Setup extensions that should be used to resolve

                          modules (Example: --resolve-extensions .es6,.js)

                                                                         [array]

  --resolve-loader-alias  Setup a loader alias for resolving            [string]

07: 优化选项 Optimizing options:

  --optimize-max-chunks      Try to keep the chunk count below a limit

  --optimize-min-chunk-size  Try to keep the chunk size above a limit

  --optimize-minimize        Minimize javascript and switches loaders to

                             minimizing                                [boolean]

08: 统计选项 Stats options:

  --color, --colors               Enables/Disables colors on the console

                                           [boolean] [default: (supports-color)]

  --sort-modules-by               Sorts the modules list by property in module

                                                                        [string]

  --sort-chunks-by                Sorts the chunks list by property in chunk

                                                                        [string]

  --sort-assets-by                Sorts the assets list by property in asset

                                                                        [string]

  --hide-modules                  Hides info about modules             [boolean]

  --display-exclude               Exclude modules in the output         [string]

  --display-modules               Display even excluded modules in the output

                                                                       [boolean]

  --display-max-modules           Sets the maximum number of visible modules in

                                  output                                [number]

  --display-chunks                Display chunks in the output         [boolean]

  --display-entrypoints           Display entry points in the output   [boolean]

  --display-origins               Display origins of chunks in the output

                                                                       [boolean]

  --display-cached                Display also cached modules in the output

                                                                       [boolean]

  --display-cached-assets         Display also cached assets in the output

                                                                       [boolean]

  --display-reasons               Display reasons about module inclusion in the

                                  output                               [boolean]

  --display-depth                 Display distance from entry point for each

                                  module                               [boolean]

  --display-used-exports          Display information about used exports in

                                  modules (Tree Shaking)               [boolean]

  --display-provided-exports      Display information about exports provided

                                  from modules                         [boolean]

  --display-optimization-bailout  Display information about why optimization

                                  bailed out for modules               [boolean]

  --display-error-details         Display details about errors         [boolean]

  --display                       Select display preset (verbose, detailed,

                                  normal, minimal, errors-only, none)   [string]

  --verbose                       Show more details                    [boolean]

09: 选项 Options:

  --help, -h     显示帮助信息

  --version, -v  版本号

  --json, -j     将结果以JSON格式显示

4.准备项目文件夹及文件

为了更好地演示和学习webpack，请建好下列文件夹和文件

项目根目录

│   package.json

├───node_modules

│       └╌╌ 下面是npm包

├───dist

│     └╌╌╌╌╌logo.jpg

├───build

│   ├╌╌╌╌╌ build.js

│   ├╌╌╌╌╌ webpack.base.conf.js

│   ├╌╌╌╌╌ webpack.dev.conf.js

│   └╌╌╌╌╌ webpack.prod.conf.js

├───src

│   ├╌╌╌╌╌ main.js

│   └╌╌╌╌╌tmp

│         ├╌╌╌╌╌home.js

│         ├╌╌╌╌╌about.js

│         └╌╌╌╌╌contact.js

│   └╌╌╌╌╌template

│         └╌╌╌╌╌daqi.html // 为hmtl插件的模板

│   └╌╌╌╌╌images

│         └╌╌╌╌╌logo.jpg

先只需写这几个文件，后面会陆续补充

二：打包

准备配置文件

根目录/build/webpack.dev.conf.js的内容如下，这是史上最简单的配置文件了

module.exports = {

    entry: './src/main', //main.js中的.js可以省略，前面的./不能省

    output:{

        filename:'./dist/app.js' // dist文件夹不存在时，会自动创建

    }

}

根目录/src/main.js中随便写一句

console.log('hello,欢迎来到零和壹在线课堂')

打包

D:\03www2018\study\webpack2017>npm run a,显示如下

> webpack2017@1.0.0 a D:\03www2018\study\webpack2017

> webpack --config ./build/webpack.dev.conf.js

Hash: 94dc0f2301921649904c  // complication的hash值，它的长度和算法由output中相应的项决定

Version: webpack 3.10.0 // webpack的版本

Time: 55ms // 打包花费的时间

        Asset    Size  Chunks             Chunk Names

./dist/app.js  2.5 kB       0  [emitted]  main //单个文件和数组的chunk名字默认为main

   [0] ./src/main.js 32 bytes {0} [built]

打开打包后的文件看下,整体是一个自执行文件，每个文件是一个模块做为自执行函数的参数

三：开启服务器

先启动看下，根目录>npm run b
从启动的信息中可以看到，它包含了上面的打包，项目的网址是http://localhost:8080/，可以在浏览器中打开看下效果，但由于没有指定入口文件，所以会显示当前目录的内容,有一点必须明白，服务器打包的后的文件并没有物理存在电脑上，只是在内存中，为了方便教程的讲解，在这里先讲下服务器的配置，有关全部配置的讲解，请参考下一篇文章:配置文件详解

3.1 使用HtmlWebpackPlugin插件生成首页

首页一般为一个html文件，我们到现在还没有定义，为了方便，顺便提前了解一下webpack的插件功能，我这里使用HtmlWebpackPlugin来生成首页，插件的使用基本相同，分以下几步

第一步安装 根目录>cnpm i -D html-webpack-plugin
修改配置文件 根目录/build/webpack.dev.conf.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin'); //第二步导入

module.exports = {

    entry: './src/main', //main.js中的js可以省略，前面的./不能省

    output:{

        filename:'./dist/[hash]app.js',

        hashDigestLength: 8 // 默认长度是20

    },

    plugins: [new HtmlWebpackPlugin], //第三步，实例化后放在plugins这个数组中就行

    devServer: {

      contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误

      port: 9000, //端口改为9000

      open:true // 自动打开浏览器，适合懒人

    }

}

生成的html文件只在内存中，并没有存在物理磁盘上，来看一下生成的内容,留心下生成的js文件中的hash值，它的长度是8位，就是上面hashDigestLength: 8定义的

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Webpack App</title>

  </head>

  <body>

  <script type="text/javascript" src="./dist/4e0c807aapp.js"></script></body>

</html>

html-webpack-plugin的用途

对于打包的文件名中有hash的，这个插件是必选，因为每次源文件修改，打包后的名字就不一样
生成一个html5模板文件，可适用于lodash模板，也可以利用自己定义的加载器
js注入，打包后的js文件会自动注入到html文件的body结尾部分(默认，也可以注入到head部分)
css文件注入,假如你使用ExtractTextPlugin插件(这个插件也是必须要了解的)将css文件是单独剥离出来，不放在html中的style标签内，它会自动将css链接注入到link标签中

html-webpack-plugin插件完整配置

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig={

    title: 'hello,零和壹在线课堂', // html5文件中<title>部分

    filename: 'front.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样，最终完整文件路径是output.path+filename，如果filename中有子文件夹形式，如`./ab/cd/front.html`，只取`./front.html`

    template: './src/template/daqi.html', //如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处

    inject:head, // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js

}

module.exports = {

    entry: './src/main', //main.js中的js可以省略，前面的./不能省

    output:{

        filename:'./dist/[hash]app.js',

        hashDigestLength: 8

    },

    plugins: [new HtmlWebpackPlugin(HtmlWebpackPluginConfig)], //先不配置插件，看看效果

    devServer: {

      contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist

      port: 9000, //端口改为9000

      open:true, // 自动打开浏览器

      index:'front.html' // 与HtmlWebpackPlugin中配置filename一样

    }

}

3.2 devServer常用配置

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig={

    title: 'hello,零和壹在线课堂', // html5文件中<title>部分

    filename: 'front.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样

    template: './src/template/daqi.html', // 如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处

    inject:'body', // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js

}

module.exports = {

    entry: './src/main', //main.js中的js可以省略，前面的./不能省

    output:{

        filename:'./dist/[hash]app.js',

        hashDigestLength: 8

    },

    plugins: [new HtmlWebpackPlugin(HtmlWebpackPluginConfig)], //先不配置插件，看看效果

    devServer: {

      contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist

      port: 9000, //端口改为9000

      host: '192.168.0.103', //如果指定的host，这样同局域网的电脑或手机可以访问该网站,host的值在dos下使用ipconfig获取

      open:true, // 自动打开浏览器

      index:'front.html', // 与HtmlWebpackPlugin中配置filename一样

      inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中

      hot:false,

      compress:true //压缩

    }

}

结合服务器和html插件，最后生成的配置文件如下

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack')

const HtmlWebpackPluginConfig={

    title: 'hello,零和壹在线课堂', // html5文件中<title>部分

    filename: 'front.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样

    // 也是 context+template是最后模板的完整路径，./不能少

    template: './template/daqi.html', // 如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处

    inject:'body', // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js

}

module.exports = {

    context: path.resolve(__dirname,'../src'), //D:\03www2018\study\webpack2017\build\src

    entry: './main', //main.js中的js可以省略，前面的./不能省

    output:{

        path:path.resolve(__dirname,'../dist'),

        filename: './[hash]app.js',

        hashDigestLength: 8

    },

    module: {

        rules: [       

            ]

      },

    plugins: [

        new HtmlWebpackPlugin(HtmlWebpackPluginConfig), // 生成首页html5文件，外部插件需要安装

        new webpack.DefinePlugin({BJ: JSON.stringify('北京'),}) // 内置插件，无须安装，可以理解为它是webpack实例的一个方法，该插件相当于apache等web服务器上定义一个常量

    ],

    devServer: {

      contentBase: path.resolve(__dirname, "../dist"), //网站的根目录为 根目录/dist，这个路径一般与output.path一致，因为html插件生成的html5页是放在output.path这个目录下

      port: 9000, //端口改为9000

      open:true, // 自动打开浏览器，每次启动服务器会自动打开默认的浏览器

      index:'front.html', // 与HtmlWebpackPlugin中配置filename一样

      inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中

      hot:false,

      compress:true //压缩

    }

}

3.3 给首页加一张图片

// D:\03www2018\study\webpack2017\src\template\daqi.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>大奇模板</title>

  </head>

  <body>

      <div style="background-color:#eee;font-size:16px;">欢迎来到零和壹在线课堂1234</div>

      <div id='hello'></div>

      <img src='/img/logo2.jpg' data-src='../images/logo.jpg' />

  </body>

</html>

webpack，通过使用file-loader可以将图片当成一个模块，使用require来导入，进一步可以使用url-loader将图片转成base64-data
使用图片的场景大致分四种，html文件中使用src标签，样式的background中设定背景，js文件中元素.innerHTML='<img src="logo.jpg" />'的方式，最后一种是在vue或react等框架中使用，今天要讲的是第一种，如何处理html文件src标签中的图片
html文件中图片的处理有两种，一种是象正常使用图片一样，不打包，但图片必须放在打包生成文件目录下，如./dist/logo.jpg，也就是最后的入口front.html文件可以读到的位置，在front.html中使用<img src='./logo.jpg'/>,表示logo.jpg与最后生成的front.html是同级目录。但实际工作中，往往图片放在与打包前的html模板文件一起的，需要将图片和html模板文件分别打包到./dist下，这使用html-loader是解决不了的，官网及网上大部分教程讲得不是特别清楚，在这里我详细讲下，这里就要用到file-loader，否则会报错Error: Child compilation failed: Module parse failed: Unexpected character '�' (1:0)You may need an appropriate loader to handle this file type.

第1步：安装html-loader和file-loader,根目录/cnpm i -D html-loader file-loader
file-loader处理require('./logo.jpg')这种类型，将图片当成一个js模块
html-loader是将html中src标签中配置有特定data属性的图片，转为由require的方式来导入。也就是说，它只是标识为哪些图片需要由require的方式导入，但具体require导入，得需要file-loader插件，
第2步：在webpack.conf.js中配置这两个加载器

module: {

        rules: [

        {

            test: /\.html$/,

            use: {

                loader: 'html-loader',

                options: {

                 attrs: [':data-src']

                }

            }

        },

     {

        test: /\.(png|jpg|gif)$/,

        use: [

          {

            loader: 'file-loader',

            options: {

                //name: '[path][name].[ext]',

                name: '[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name，[name],[ext],[path]表示原来的文件名字，扩展名，路径

                //useRelativePath:true,

                outputPath: 'img/' // 后面的/不能少

            }

          }

        ]

      },

        ]

      },

第3步：在html文件src标签中引用图片
<img src='/img/logo2.jpg' data-src='../images/logo.jpg' />
这里注意，data-src是打包前图片位置，src是打包后图片的url

四: 手机或其它电脑访问该服务器

实际开发中，需要手机或其它设备如ipad即时访问该服务器
服务器: 就是开启webpack-dev-server这台电脑
其它设备：下面以同一网络下的手机为例(同一wifi就行)
第一步：配置服务器

devServer: {

    contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误

    port: 9000,

    open: true,

    host: '192.168.0.103' //请在dos下，输入ipconfig可以找到当前电脑的ip

}

第二步：在手机上找一个合适的浏览器，输入 192.168.0.103:9000就可以访问
说明：有少数浏览器打开是空白网页，我使用uc浏览器ok，ip地址和端口与你自己的设置有关，我上面只是我的设置

秒客网

webpack从零开始第1课:安装webpack和webpack-dev-server