本文主要分为：

• 环境配置

• 使用配置文件

• CSS 处理

• ES6 代码编辑

• 文件压缩

• SASS 处理

• CSS 与 JS 分离

• 文件处理 file-loader 与 url-loader

• 多入口及自动清理

客位看官可直接 ctrl + f 搜索对应关键字

环境配置

• window + r ，输入 cmd 打开命令行

• 新建并进入 webpack-3.10.0 文件夹

  mkdir webpack-3.10.0 && cd webpack-3.10.0

• 使用 sublime text3 的 subl.exe 打开该文件夹
  

  

  subl.exe

  
  

• 在 webpack-3.10.0 目录下初始化操作，生成 package.json 文件

  npm init -y

也可以直接使用 npm init 来初始化 package.json 文件，但这样需要手动填写项目名之类的东西，加上 -y 表示使用默认配置

npm init -y

• 新建 src 文件夹，今后将要打包的文件全部放入该文件夹下
  

  

  新建 src 文件夹

  
  

• 在 src 下新建 main.js 并随便敲一点代码
  

  

  main.js

  
  

• 安装 webpack

  npm install webpack@3.10.0 --save-dev

这里是安装指定版本号的 webpack，不加版本号则是最新版

安装完成

安装完成后的 package.json

package.json

安装完成后的项目目录

新增了 node_modules 目录

• 修改 package.json
  

  

  增加执行脚本语句

  
  

• 打包

  #  命令语句        源文件        目标文件npm run start src/main.js dist/bundle.js

如果没有 dist 目录则自动新建

打包

• 打包结果

  
  

  

  打包后

• 在 webpack-3.10.0 目录下创建 index.html 文件，引入之前打包好的 bundle.js 文件

html>
    
    
Hello World!
    

打包并引入成功

• 我们同样可以把打包的语句直接写在 package.json 中，免得每次输入很麻烦

  "start":"webpack src/main.js dist/bundle.js"

image.png

这样我们在命令行中直接调用 npm run start 也能实现打包的效果

• 现在有个问题，当我们修改 main.js 文件的内容时，刷新页面并不会显示更新的改动，如果想让页面同步的话，我们还需再执行一次 npm run start 语句，每次这样未免太麻烦，可以通过以下几种方式改善：

  "start":"webpack src/main.js dist/bundle.js --watch",

  # package.json"scripts": {  "test": "echo "Error: no test specified" && exit 1",  "start":"webpack src/main.js dist/bundle.js",  "watch":"npm run start -- --watch"},

  • 方法二：新定义一个 watch 命令，这种方式根据官方文档说明，由于调用的是之前自定义的 npm run start 命令，因此需要在 --watch 前额外添加 --

  • 方法一：修改 package.json 中之前写好的 start 语句

package.json

以第二种方式为例：

监听成功

此时则监听成功，修改 main.js 保存则实时会在 bundle.js 中显示，页面中刷新即可展示；ctrl + c 终止监听。

实时监听

使用配置文件

• 为了看出效果，我们先把之前生成的 bundle.js 文件删掉。

• 在 webpack-3.10.0 目录下创建 webpack.config.js ，并输入如下内容

#  webpack.config.jsvar webpack = require("webpack");

module.exports = {
    entry:'./src/main.js', 
    output:{
        path:'./dist',        
        filename:'bundle.js'
    }
}

此时你的项目结构应该是这样的，dist 目录下 空空如也：

dist 目录下为空

• 跑一下试试
  

  

  报错

  
  原因是 output 中的路径需要是绝对路径 absolute path

  
  

• 在配置文件中引入 path 模块解决绝对路径问题

  var webpack = require("webpack");var path = require("path");module.exports = {    entry:'./src/main.js',    output:{        path:path.resolve(__dirname,'./dist'),        filename:'bundle.js'
      }
  }

• 由于添加了配置文件，因此需要修改一下 package.json 中的启动命令 npm run start 更改为如下（因为配置文件中已经设置了路径及文件名，因此不需要命令中再指定）

  "start":"webpack",

• 跑一下

  
  

  

  跑跑

  
  

  

  同样是创建了 bundle.js 文件

  
  

  效果是一样的

CSS 处理

• 在 src 目录下创建 main.css

  # main.cssbody{    background: orange;
  }

• 修改 main.js

  # main.jsrequire('./main.css')

• 使用 npm run watch 命令会报错
  

  

  缺少 loader

  
  缺少 loader，这里引用官网说明：

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

• 处理 css 需要安装一个 css-loader 的包：

  npm install css-loader --save-dev

安装成功

• 安装完成后需要在配置文件中进行处理，注意 module 属性：

# webpack.config.jsvar webpack = require("webpack");var path = require("path");

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[{
            test:/.css$/,  //  正则匹配 .css 后缀
            use:'css-loader'
        }]
    }
}

再跑一下

修改配置文件之后

看一下是否被打包到 bundle.js 中

bundle.js

可以看到 main.css 的样式的确被打包到 bundle.js 中了，但为什么浏览器中没有效果？

• 安装 style-loader

npm install style-loader --save-dev

• 修改配置文件，注意：style-loader 需要写在前面
  

  

  修改配置文件

• 再调用命令

  npm run watch

样式已注入

将 ES6 代码编辑为所有浏览器通用的代码

• 将 main.js 内容改为一段 ES6 的代码

  # main.jslet a = 11;const b = 22;class Foo{}

• 直接调用 npm run watch 会发现 bundle.js 中的代码依旧为 ES6
  

  

  尚未安装 ES6

• 这时需要 Babel 这个工具

Babel 的作用就是将下一代的 JavaScript 语法转换为现今浏览器兼容的语句

• 首先安装 Babel

  npm install --save-dev babel-loader babel-core

• 在 webpack.config.js 中添加一条规则：

  { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }

  其中，test 用于判断扩展名为 .js 的文件，exclude 表示不包括的文件。
  添加规则后，此时的 webpack.config.js 文件应该是这样的
  

  

  添加规则

• 安装转换 ES2015 及更高版本 JavaScript 语法的 env preset

  npm install babel-preset-env --save-dev

• 在根目录 webpack-3.10.0 下创建 .babelrc 文件，内容如下：

  {  "presets": ["env"]
  }

创建 .babelrc

• OK，现在执行命令 npm run watch，可以看到我们之前 main.js 中的语句在 bundle.js 中已经成功转换成通用语句了
  

  

  main.js

  
  

  

  bundle.js

  
  本节内容可直接参考 Babel 官网：https://babeljs.cn/

文件压缩

• 文件压缩需要用 webpack 的插件来实现，比如 webpack 自带一个 BannerPlugin 插件，用于添加顶部注释，首先在 webpack.config.js 中添加如下代码：

  plugins:[  new webpack.BannerPlugin('顶部注释插件')
  ]

• 重新打包 npm run watch，成功后，bundle.js 中顶部出现注释
  

  

  添加成功

• webpack 有个自带的插件 UglifyJsPlugin 用于压缩文件

plugins:[  new webpack.BannerPlugin('顶部注释插件'),  new webpack.optimize.UglifyJsPlugin()
]

重新打包后的 bundle.js

压缩后的 bundle.js

• 然而我们在开发调试阶段是不需要压缩代码的，因此需要对开发环境和线上环境做个区分，开发环境不压缩代码，线上环境才压缩

  if(process.env.NODE_ENV === 'production'){    module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin())
  }

  如果是线上环境，则将 UngifyJsPlugin 插件填入 webpack 的 plugins 中

• 回到命令行调用命令

  set NODE_ENV=production  // 设置为生产环境， windows 系统npm run watch

切换线上环境并打包

• 我们可以直接在 package.json 中添加脚本命令（我尝试了几种写法，发现只有这样是有效的，不知道为什么。此外，有时这样也不好用，需要在命令行中手动制定一次 set NODE_ENV=production，之后调用 npm run production 就有效了）

  "scripts": {  "test": "echo "Error: no test specified" && exit 1",  "start": "webpack",  "watch": "npm run start -- --watch",  "production":"set NODE_ENV=production && npm run watch",  "development":"set NODE_ENV=development && webpack --watch"}

这样在命令行中通过 npm run development 即可切换为开发环境（代码不压缩），npm run production 就是生产环境（代码压缩）

开发生产环境切换

• 对 webpack.config.js 简单做一下整理

var webpack = require("webpack");var path = require("path");var isProduction = process.env.NODE_ENV === 'production'module.exports = {    entry:'./src/main.js',    output:{        path:path.resolve(__dirname,'./dist'),        filename:'bundle.js'
    },    module:{        rules:[{            test:/.css$/,            use:['style-loader','css-loader']
        },{ 
            test: /.js$/, exclude: /node_modules/, loader: "babel-loader" 
        }]
    },    plugins:[        new webpack.BannerPlugin('顶部注释插件'),
    ]
}if(isProduction){    module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin())
}

作者：_我亦飘零
链接：https://www.jianshu.com/p/8a0979063b45