这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

起步流程

安装指令： cnpm webpack webpack-cli –g//全局安装
cnpm webpack webpack-cli –D//本地安装

运行指令：

• 开发环境：webpack [入口文件] –o [输出文件] –mode=development
  从入口文件开始打包，输出到出口文件，是开发环境
• 生产环境：webpack [入口文件] –o [输出文件] –mode=production
  会压缩js代码 整个文件打包后的代码类似于：

(function (module) {
  /*...
   * 函数体
   * ...*/
})({
  // 参数
});

loader 和 plugin

Loader

Webpack只能处理js、json资源，其他的得依托loader。

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。

特点：单一，一个loader只处理一件事；所以可能需要引入好很多loader
用法：一个loader用字符串，多个的话用数组罗列
Loader顺序：默认从右向左使用； ['a','b']先执行b再执行a
Loader还可以写成对象：此时可以传一个参数options

Plugin

目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
webpack提供了很多开箱即用的插件：比如CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle.

webpack 配置的基本模板

这里是一个webpack简单配置的模版，有些重要的地方我已经给出了注释，大家可以借鉴一下哈

let path = require("path"); //内置模块，通过resolve来将地址解析为绝对路径\
let HtmlWebpackPlugin = require("html-webpack-plugin");
let miniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  devServer: {
    //开发服务器配置
    port: 3000,
    progress: true, //显示进度条
    contentBase: "./build", //指定目录
    compress: true, //压缩
  },
  mode: "development" /*有两种 1、production生产环境，会代码压缩
2、development，开发环境，不压缩代码*/,
  entry: "./src/index.js", //入口,
  output: {
    filename: "bundle.js", //打包后的文件名
    path: path.resolve(__dirname, "build"), //路径必须是一个绝对路径，__dirname是指在当前目录下
  },
  module: {
    //模块
    rules: [
      //规则
      //css-loader 解析 @import这种写法的
      //style-loader 把css插入到head标签中
      {
        //test 正则 来匹配文件
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options: {},
          },
          "css-loader",
        ],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader",
            options: {},
          },
          "css-loader",
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    //数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
    new miniCssExtractPlugin({
      filename: "",
    }),
  ],
};