开始 webpack 之旅

npm install webpack --save-dev

这里如果没有指定 -g全局安装，那么需要调用 node_modules 下的 webpack.js 来执行，因为非全局安装没有添加环境变量

尝尝鲜，做点 webpack

必须的第一步：编写 webpack.config.js

// webpack.config.js
module.exports = {
  // 两个必须参数：
  entry: '', // 入口文件，写路径即可
  output: {  // 打包后文件，有两个参数：
    filename: '',   // 文件名，'[name]'表示使用原名，'[hash]'使用哈希值
    path: '',       // 文件夹路径，对着官方敲,path.resolve(__dirname, '文件夹名'),需先导入
    publicPath: '', // 上线地址，例如 http://ningtaostudy.cn
  },
};

现在碗和米饭有了，怎么端起来吃呢

直接在命令行运行 webpack，再加点料：

webpack 
    --display-reasons 
    --PRogress 
    --colors 
    --display-modules 
    --config # webpack 配置文件名（换个碗吃饭）

在 npm 脚本里写指令（偷懒让别人帮你盛饭），接着命令行里运行 npm run webpack：

{
    "scripts": {
        "webpack": "webapck --progress --colors"
    }
}

饭吃到了，没有菜（webpack 插件）怎么行呢

打包 htML 的插件 html-webpack-plugin。惯例第一步 npm install，接着在 webpack.config.js 里配置插件，有了 entry 和 output 出头鸟，我们知道该写一个 plugin 了：

// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new htmlWebpackPlugin({
      filename: '[name]-[hash].html',
      template: 'index.html',
      inject: 'head',
      kill: 'bill',
    }),
  ],
};
        

让我们来品品小当家的菜：

• filename 很好，不就入口文件吗
• template 你不用说，我知道是模板，相对于配置文件的路径
• inject 我就不遵从开发最佳实践，就要在head里加载js文件，打我呀

• kill 杀死比尔，纯属虚构。这是自定义的模板，模板里调用，下面举个栗子：

  PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" " tITle="" data-original-title="复制">

  <!-- index.html -->
  <!-- template 里的文件是 index.html，使用自定义模板来确定标题 -->
  <title><%= htmlWebpackPlugin.options.kill %><title>
  
  <!-- 转化后 -->
  <title>bill</title>

上面代码一样一样的。老夫斗胆说一句，这里模板引擎类似 jsp，但还是 js 语法

去官网看看 小当家

来瓶酒（loaders）吧，生活美滋滋

loader 用来加载资源文件，诸如图片、css之类的，这样我们就可以在 .js 里导入 css，你没听错，用起来我也没有在蒙你

最简单常用来加载 css 的两个 loader:

npm install style-loader css-loader --save-dev
# style-loader 用来插入 style 标签
# css-loader 用来加载 css 代码，此 loader 居下

话不多说，开车：

// webpack.config.js
module.exports = {
  modules: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

看起来嵌套挺多的哈，不过很简单。modules 下的 rules 包含很多匹配规则（正则表达式），每一条代表加载什么类型的资源文件，上面写的就是加载 .css 样式文件，并使用 style-loader 和 css-loader 加载。

现在问题来了，我想喝瓶茅台（自动添加浏览器产商前缀）。没问题，强大的 webpack 生态圈给你提供了 postcss-loader，一个更高大上的 loader。这个时候我们都知道只需要改一下 use 数组：

[
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      importLoaders: 1
    },
  },
  'postcss-loader'
]

数组的项可以是对象，这样我们的 loader 就能带 options 里的参数，等同于：

use: 'style-loader!css-loader?importLoaders=1!postcss-loader'

至于为什么要带这样的参数，这是因为一个 @import 引发的血案

webpack-dev-server 大厨来也

我是谁，我从哪里来，我又该到哪里去

日益繁重的前端工作下，没有人能阻挡我们偷懒的步伐。。webpack 只是一个打包工具，即使我们能带 --watch 自动编译，但浏览器还得手动刷新（心中一个卧槽，尼玛还有这种操作，曾经学习的一年里自己起码动手刷新浏览器点了 10000 次，忍不住吐槽浏览器刷新按钮就不能做一个浮动的吗，还得移动大半个屏幕，我鼠标少说走了 1000m 了）。很好，在灵长类动物面前都不是问题：

npm install webpack-dev-server -D # 这个不是重点，缩写而已

接下来配置 webpack，其实官网很详细了，还带中文的，比个赞

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: './dist', // 根目录，就像 @R_126_1057@ 的 www 文件夹
  },
};

然后呢卧槽？没错，好了，输入吧肿瘤君：

webpack-dev-server --open

偷懒神（package.json）在此：

{
    "scripts": {
        "start": "webpack-dev-server --open --color"
    }
}

再运行 npm start，这次连 run 都省了，，，

好了，以上就是初步了解 webpack 了，再总结一下吧

配置项一览：

// webpack.config.js
module.exports = {
  entry: '',
  output: {},
  module: {
    rules: [],
  },
  plugins: [],
  devServer: {},
  devtool: 'inline-source-map', // 开发环境下调试专用，快速定位错误文件位置
};

常用 loader：

• 加载 html：html-webpack-plugin、html-loader
• 加载 css：style-loader、css-loader、sass/less-loader
• 加载 es6：babel-loader
• 加载图片、JSON 等文件：file-loader、url-loader（转base64）、image-loader（压缩）、json-loader

上面的这些 loader 都可以去 npmjs 官网 上查看详细的配置

-loader 在 webpack 2+ 不能省略；html 插件和 loader（加载模板）不能混着用