webpack 4.x学习使用总结

摘要：最近一周一直都在折腾一些项目中常用的记录下来，以后免去简单的配置再去查文档。常规入口指示应该使用哪个模块，来作为构建其内部依赖图的开始。把代码转换成，在使用语言中有介绍。扩展语法，使用下一代，在使用中有介绍。用于忽略部分文件。

最近一周一直都在折腾webpack,一些项目中常用的记录下来，以后免去简单的配置再去查文档。

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
三种写法：

entry: "./app/entry", // string | object | array
  entry: ["./app/entry1", "./app/entry2"],
  entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },

output 属性告诉 webpack 在哪里输出它所创建的 bundles

output:{
    path: path.resolve(__dirname, "dist"), // string,
      
    filename: "bundle.js", // string
    filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
    filename: "[chunkhash].js", // 用于长效缓存
    
    publicPath: "",
    publicPath: "https://cdn.example.com/",
}

开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为_模块_。

module:{
      rules:[{
        test: /.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
        // test 和 include 具有相同的作用，都是必须匹配选项
        // exclude 是必不匹配选项（优先于 test 和 include）
        // 最佳实践：
        // - 只在 test 和 文件名匹配 中使用正则表达式
        // - 在 include 和 exclude 中使用绝对路径数组
        // - 尽量避免 exclude，更倾向于使用 include
        issuer: { test, include, exclude },
        // issuer 条件（导入源）
        enforce: "pre",
        enforce: "post",
        // 标识应用这些规则，即使规则覆盖（高级选项）
        loader: "babel-loader",
        // 应该应用的 loader，它相对上下文解析
        // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
        // 查看 webpack 1 升级指南。
        options: {
          presets: ["es2015"]
        },
        // loader 的可选项
      }]
  }

  ## 4.插件(plugins)

  插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上

var webpack = require("webpack");
// 导入非 webpack 自带默认插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DashboardPlugin = require("webpack-dashboard/plugin");
// 在配置中添加插件
plugins: [
  // 构建优化插件
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    filename: "vendor-[hash].min.js",
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_console: false,
    }
  }),
  new ExtractTextPlugin({
    filename: "build.min.css",
    allChunks: true,
  }),
  new webpack.IgnorePlugin(/^./locale$/, /moment$/),
  // 编译时(compile time)插件
  //html文件插件
  new HtmlWebpackPlugin({
      template: "index.html"
      title: "My App",
      filename: "assets/admin.html",
      chunks: ["app"],
      excludeChunks: [ "dev-helper" ]
    })
]

devServer: {
    //proxy: { // proxy URLs to backend development server
    //  "/api": "http://localhost:3000"
   // },
    contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    //historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    //https: false, // true for self-signed, object for cert authority
    //noInfo: true, // only errors & warns on hot reload
    // ...
  },
      
devtool:"none"/"source-map"  // 生产环境
devtool:"eval-source-map"//开发环境

//配置
externals: {
  jquery: "jQuery"
}
//代码中使用
import $ from "jquery";
$(".my-element").animate(...);

raw-loader：把文本文件的内容加载到代码中去
file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件，
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去，在
source-map-loader：加载额外的 Source Map 文件，以方便断点调试，
svg-inline-loader：把压缩后的 SVG 内容注入到代码中，
node-loader：加载 Node.js 原生模块 .node 文件。
image-loader：加载并且压缩图片文件。
json-loader：加载 JSON 文件。
yaml-loader：加载 YAML 文件。

handlebars-loader：把 Handlebars 模版编译成函数返回。
markdown-loader：把 Markdown 文件转换成 HTML。

babel-loader：把 ES6 转换成 ES5，在3-1使用 ES6 语言中有介绍。
ts-loader：把 TypeScript 转换成 JavaScript，在3-2使用 TypeScript 语言中有遇到。
awesome-typescript-loader：把 TypeScript 转换成 JavaScript，性能要比 ts-loader 好。
coffee-loader：把 CoffeeScript 转换成 JavaScript。

css-loader：加载 CSS，支持模块化、压缩、文件导入等特性。
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
sass-loader：把 SCSS/SASS 代码转换成 CSS，在3-4使用 SCSS 语言中有介绍。
postcss-loader：扩展 CSS 语法，使用下一代 CSS，在3-5使用 PostCSS中有介绍。
less-loader：把 Less 代码转换成 CSS 代码。
stylus-loader：把 Stylus 代码转换成 CSS 代码。

eslint-loader：通过 ESLint 检查 JavaScript 代码，在 3-16检查代码中有介绍。
tslint-loader：通过 TSLint 检查 TypeScript 代码。
mocha-loader：加载 Mocha 测试用例代码。
coverjs-loader：计算测试覆盖率。

vue-loader：加载 Vue.js 单文件组件，在3-7使用 Vue 框架中有介绍。
i18n-loader：加载多语言版本，支持国际化。
ignore-loader：忽略掉部分文件，在3-11构建同构应用中有介绍。
ui-component-loader：按需加载 UI 组件库，例如在使用 antd UI 组件库时，不会因为只用到了 Button 组件而打包进所有的组件。

context-replacement-plugin：修改 require 语句在寻找文件时的默认行为。
ignore-plugin：用于忽略部分文件。

extract-text-webpack-plugin：提取 JavaScript 中的 CSS 代码到多带带的文件中
prepack-webpack-plugin：通过 Facebook 的 Prepack 优化输出的 JavaScript 代码性能，
uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码，
webpack-parallel-uglify-plugin：多进程执行 UglifyJS 代码压缩，提升构建速度。
imagemin-webpack-plugin：压缩图片文件。
webpack-spritesmith：用插件制作雪碧图。
ModuleConcatenationPlugin：开启 Webpack Scope Hoisting 功能，
dll-plugin：借鉴 DDL 的思想大幅度提升构建速度，
hot-module-replacement-plugin：开启模块热替换功能。

serviceworker-webpack-plugin：给网页应用增加离线缓存功能，在
stylelint-webpack-plugin：集成 stylelint 到项目中，
i18n-webpack-plugin：给你的网页支持国际化。
provide-plugin：从环境中提供的全局变量中加载模块，而不用导入对应的文件。
web-webpack-plugin：方便的为单页应用输出 HTML，比 html-webpack-plugin 好用。

var path = require("path")
var webpack = require("webpack")
//性能分分析
const WebpackMonitor = require("webpack-monitor");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  mode: " "production" | "development" | "none"",
  entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },
  output: {
    path: path.resolve(__dirname, "dist"), // string,
    filename: "bundle.js", // string
    filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
    filename: "[chunkhash].js", // 用于长效缓存
    publicPath: "",
    publicPath: "https://cdn.example.com/"
  },
  module: {
    rules: [
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        // 用正则去匹配要用该 loader 转换的 CSS 文件
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          use: ["style-loader", "css-loader", "postcss-loader"],
          include: path.join(__dirname, "./src"),
          exclude: /node_modules/
        })
      },
      {
        test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
        loader: {
          loader: "file-loader",
          options: {
            name: "[name].[ext]?[hash]"
          }
        }
      },
      {
        test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
        loader: {
          loader: "url-loader",
          options: {
            limit: 5 * 1024, // 图片大小 > limit 使用file-loader, 反之使用url-loader
            outputPath: "images/" // 指定打包后的图片位置
          }
        }
      },
      {
        // 暴露模块
        test: require.resolve("jquery"), // 注意 这里是require的resolve 方法
        use: {
          loader: "expose-loader",
          options: "$"
        }
      }
    ]
  },
  plugins: [
    // 构建优化插件
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      filename: "vendor-[hash].min.js"
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: false
      }
    }),
    //提取css文件
    new ExtractTextPlugin({
      filename: "build.min.css",
      allChunks: true
    }),
    new WebpackMonitor({
      capture: true, // -> default "true"
      target: "../monitor/myStatsStore.json", // default ->  "../monitor/stats.json"
      launch: true, // -> default "false"
      port: 3030 // default -> 8081
    }),
    //html文件插件
    new HtmlWebpackPlugin({
      template: "index.html",
      title: "My App",
      filename: "assets/admin.html",
      chunks: ["app"],
      excludeChunks: ["dev-helper"]
    })
  ],
  devServer: {
    //proxy: { // proxy URLs to backend development server
    //  "/api": "http://localhost:3000"
    // },
    contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    //historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
    //https: false, // true for self-signed, object for cert authority
    //noInfo: true, // only errors & warns on hot reload
    // ...
  },
  devtool: "eval-source-map", //开发环境
  //配置
  externals: {
    jquery: "jQuery"
  }
};

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm i postcss-import postcss-url autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units cssnano-preset-advanced -D
npm install viewport-units-buggyfill
var hacks = require("viewport-units-buggyfill/viewport-units-buggyfill.hacks");
require("viewport-units-buggyfill").init({
  hacks: hacks
});