webpack高级配置与优化详解

module.exports = {
 entry: {
  index: "./src/index.js", // 指定打包输出的chunk名为index
  foo: "./src/foo.js" // 指定打包输出的chunk名为foo
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: "./src/index.html", // 要打包输出哪个文件，可以使用相对路径
   filename: "index.html", // 打包输出后该html文件的名称
   chunks: ["index"] // 数组元素为chunk名称，即entry属性值为对象的时候指定的名称，index页面只引入index.js
  }),
  new HtmlWebpackPlugin({
   template: "./src/index.html", // 要打包输出哪个文件，可以使用相对路径
   filename: "foo.html", // 打包输出后该html文件的名称
   chunks: ["foo"] // 数组元素为chunk名称，即entry属性值为对象的时候指定的名称，foo页面只引入foo.js
  }),
 ]
}

let foo = 1;
console.lg(`console对象的方法名log写成了lg`); // 源文件第二行出错
index.js:1 Uncaught TypeError: console.lg is not a function
 at Object.<anonymous> (index.js:1)
 at o (index.js:1)
 at Object.<anonymous> (index.js:1)
 at o (index.js:1)
 at index.js:1
 at index.js:1

//# sourceMappingURL=index.js.map

//# sourceURL=webpack:///./src/index.js

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvaW5kZXguanM/YjYzNSJdLCJuYW1lcyI6WyJmb28iLCJjb25zb2xlIiwibGciXSwibWFwcGluZ3MiOiJBQUFBLElBQUlBLEdBQUcsR0FBRyxDQUFWO0FBQ0FDLE9BQU8sQ0FBQ0MsRUFBUix1RSxDQUFxQyIsImZpbGUiOiIuL3NyYy9pbmRleC5qcy5qcyIsInNvdXJjZXNDb250ZW50IjpbImxldCBmb28gPSAxO1xuY29uc29sZS5sZyhgY29uc29sZeWvueixoeeahOaWueazleWQjWxvZ+WGmeaIkOS6hmxnYCk7IC8vIOa6kOaWh+S7tuesrOS6jOihjOWHuumUmVxuIl0sInNvdXJjZVJvb3QiOiIifQ==

//# sourceURL=webpack-internal:///./src/index.js

module.exports = {
 watch: true,
 watchOptions: {
  poll: 1000, // 每隔一秒轮询一次文件是否发生变化
  aggregateTimeout: 1000, // 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里
  ignored: /node_modules/ // 排除一些文件的监听
 }
}

const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
 plugins: [
  new CleanWebpackPlugin() // 打包前清空输出目录
 ]
}

module.exports = {
 plugins: [
  new CopyWebpackPlugin([
   {
    from: "./readMe.md", // 将项目根目录下的readMe.md文件一起拷贝到输出目录中
    to: "" // 属性值为空字符串则表示是输出目录
   }
  ])
 ]
}

module.exports = {
 plugins: [
  new webpack.BannerPlugin("Copyright © 2019") // 在js文件头部添加版权说明
 ]
}

// index.js
const xhr = new XMLHttpRequest();
// xhr.open("get", "http://localhost:3000/api/test"); // 由于跨域问题无法直接访问到http://localhost:3000下的资源
xhr.open("get", "/api/test"); // 本来是要访问http://localhost:3000/api/test
xhr.onreadystatechange = () => {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText);
 }
}
xhr.send();

module.exports = {
 devServer: {
  proxy: {
   "/api": "http://localhost:3000" // 路径以/api开头则代理到localhost:3000上
  }
 }
}

module.exports = {
 devServer: {
  proxy: {
   "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"/api": ""} // 将/api替换掉
   }
  }
 }
}

before(app) { // 此app即webpack的devServer
   app.get("/api/test", (req, res, next) => {
    res.json({name: "even"});
   })
  }

const express = require("express");
const app = express();
const webpack = require("webpack"); // 引入webpack
const config = require("./webpack.config.js"); // 引入配置文件
const compiler = webpack(config); // 创建webpack的编译器
const middleWare = require("webpack-dev-middleware"); //引入webpack的中间件
app.use(middleWare(compiler)); // 将compiler编译器交给中间件处理
app.get("/api/test", (req, res, next) => {
 res.json({name: "lhb"});
});
app.listen(3000);

// index.js
const foo = require("./foo"); // 必须写全foo.js模块的路径
// const foo = require("foo"); // resolve.modules中配置了模块解析路径为.src目录，则可用只写foo即可搜索到foo.js模块
console.log(foo);
module.exports = {
 resolve: {
  modules: [path.resolve(__dirname, "./src/"), "node_modules"]
 },
}

// const foo = require("./a/b/c/foo"); // foo.js在./src/a/b/c/foo.js
// const foo = require("foo"); // foo被映射成了./src/a/b/c/foo.js文件
const foo = require("bar/foo.js"); // bar被映射成了./src/a/b/c/路径
console.log(foo);
module.exports = {
 resolve: {
  alias: {
   "foo": path.resolve(__dirname, "./src/a/b/c/foo.js"),
   "bar": path.resolve(__dirname, "./src/a/b/c/")
  }
 },
}

module.exports = {
 resolve: {
  mainFields: ["style", "main"]
 },
}

module.exports = {
 resolve: {
  extensions: ["js", "vue"]
 },
}

module.exports = {
 plugins: [
  new webpack.DefinePlugin({
   DEV_MODE: JSON.stringify('development') // 将'development'设置为全局变量DEV_MODE
  }),
 ]
}

module.exports = {
 module: {
  noParse:/jquery/,//不去解析jquery中的依赖库
 }
}

Entrypoint index = index.js

[./src/bar.js] 55 bytes {index} [built]

[./src/foo.js] 21 bytes {index} [built]

[./src/index.js] 81 bytes {index} [built]

Entrypoint index = index.js
[./src/bar.js] 55 bytes {index} [built]
[./src/index.js] 81 bytes {index} [built]

module.exports = {
 module: {
  rules: [
   {
    test: /.js$/,
    use: [
     {
      loader: "babel-loader",
      options: {
       presets: ["@babel/preset-env"],
       plugins: ["@babel/plugin-transform-runtime"]
      }
     }
    ],
    exclude: /node_modules/
   }
  ]
 }
}

const webpack = require("webpack");
module.exports = {
 plugins: [
  new webpack.IgnorePlugin(/lang/, /time/)
 ]
}

const HappyPack = require("happypack"); // 安装并引入happypack模块
module.exports = {
 plugins: [
  new HappyPack({ // 这里对处理css文件的loader进行包装
   id: "css",// 之前的loader根据具体的id进行引入
   use: ["style-loader","css-loader"],
   threads: 5 // 设置开启的进程数
  })
 ],
 module: {
  rules: [
   {
    test: /.css$/, // 匹配以.css结尾的文件
    use: ["happypack/loader"] //根据happypack实例中配置的id引入包装后的laoder，这里的happyPack的h可以大写也可以小写
   }
  ]
 }
}

module.exports = {
  splitChunks: { // 分割代码块，即抽离公共模块
   cacheGroups: { // 缓存组
    common: { // 组名为common可自定义
     chunks: "initial",
     minSize: 0, // 文件大小为0字节以上才抽离
     minChunks: 2, // 被引用过两次才抽离
     name: "common/foo", // 定义抽离出的文件的名称
    }
   }
  }
}

module.exports = {
  splitChunks: { // 分割代码块，即抽离公共模块
   cacheGroups: { // 缓存组
    common: { // 组名为common可自定义
     chunks: "initial",
     minSize: 0, // 文件大小为0字节以上才抽离
     minChunks: 2, // 被引用过两次才抽离
     name: "common/foo", // 定义抽离出的文件的名称
    },
    verdor: {
     test: /node_modules/,
     priority: 1, // 设置打包权重，即优先抽离第三方模块
     chunks: "initial",
     minSize: 0, // 文件大小为0字节以上才抽离
     minChunks: 2, // 被引用过两次才抽离
     name: "common/jquery", // 定义抽离出的文件的名称
    }
   }
  }
}

const button = document.createElement("button");
button.innerText = "点我"
button.addEventListener("click", () => { // 点击按钮后加载foo.js
 import("./foo").then((res) => { // import()返回的是一个Promise对象
  console.log(res);
 });
});
document.body.appendChild(button);

// ES6模块输出，res结果为
{default: "foo", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

module.exports = {
 devServer: {
  hot: true // 开启热更新
 }
}
----------
import foo from "./foo";
console.log(foo);
if (module.hot) {
 module.hot.accept("./foo", () => { // 监听到foo模块发生变化的时候
  const foo = require("./foo"); // 重新引入该模块并执行
  console.log(foo);
 });
}