webpack 简介

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

核心概念

• entry（入口）webpack 开始构建的入口模块，从该入口开始构建并计算直接或间接依赖的模块或库
• output（输出）webpack 对文件的命名和输出
• loader（加载器）对于非 js 文件处理需要依赖 loader
• plugins（插件）plugins 将不同的事件运行在不同生命周期的 hook（钩子）中提供具体功能
• mode（模式）内置优化参数，可选 production（生产模式） developement（开发模式）none（无优化参数）

安装 webpack

npm install -D webpack webpack-cli    // 安装 webpack 组件和命令行工具
npm install -D webpack-dev-server    // 安装 webpack 开发服务器

配置文件：工作目录下的 webpack.config.js

常用配置

ES6 转 ES5

npm install -D babel-loader @babel/core @babel/preset-env

module: {
  rules: [
    {
      test: /\.m?js$/,
      // exclude:　/(node_modules|bower_components)/,
      include: [resolve("src")],
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
          plugins: []
        }
      }
    }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    template: "public/index.html",
    filename: "index.html"
  })
]

静态资源打包

安装依赖

npm install -D css-loader style-loader
npm install -D url-loader file-loader

webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    },
    {
      test: /\.(png|jpg|gif)$/i,
      use: [
        {
          loader: "url-loader",
          options: {
            limit: 1024 * 8,
            name: "imgs/[name].[hash:7].[ext]",
            esModule: false    // 打包图片路径显示为 [object Module] 设置此项
          }
        }
      ]
    }
  ]
}

file-loader 5.0.0 及以后版本 esModule 选项默认值为 true，可能会导致打包后的图片路径显示为 [object Module] 的问题，设置 esModule 值为 false 即可正常显示图片，详见 Github Release。

vue 组件打包

安装依赖

npm install -S vue
npm install -D vue-loader vue-template-compiler

webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: "vue-loader"
    }
  ]
},
plugins: [
  new VueLoaderPlugin()
]