Q: Directory and environment A: The following:

  1. There are generally several environments for a project
> Development > Test > Pre-release > OnlineCopy the code
  1. Configuration environment for WebPack
> Development > Test > OnlineCopy the code

Q: Excellent Loaders and plugins A: as follows: plugins

Webpack. DefinePlugin – global variables in packing stage webpack. HashedModuledsPlugin – (cache) to keep the module id is stable, Hash to cache webpack. NoEmitOErrorsPlugin – shielding mistakes (not in a development environment for dev mode off small error, Webpack. ProvidePlugin – provides a third party library for global use, copy-webpack-plugin – copies directory contents into the packaging structure

Q: Optimize packaging speed A: as follows:

  1. DLL optimization
> webpack.dll.config.js > Third party packages generally don't change, but Webpack handles third party packages every time it's packaged, so we'll handle third party packages first and then pack themCopy the code
  // webpack.dll.config.js
  const webpack = require("webpack");
  module.exports = {
    entry: {
      // Vendor is a collection of third-party libraries
      vendor: ["jquery"]},output: {
      path: __dirname + "/dll".filename: "[name].dll.js".library: "[name]_library"
    },
    plugins: [
      new webpack.DllPlugin({
        path: __dirname + "/dll/[name]-manifest.json".name: "[name]_library"}})]// webpack.config.js
  // ...
  module.exports = {
    // ...
    plugins: [
      // ...
      new webpack.DllReferencePlugin({
        // require the output of webpack.dll. Config. js json file
        mainfest: require("./dll/vendor-manifest.json")]}})Copy the code
  1. Happypack
Js single thread, Node is able to open webWork > use node webWork multithreaded file processingCopy the code
  // webpack.config.js
  const Happypack = require("happypack");
  // Enable multiple thread pools based on the number of cpus
  const happyPackThreadPool = Happypack.ThreadPool({
    // Obtain the number of cpus from the NODE OS module
    szie: os.cpu().length
  })
  module.exports = {
    // ...
    module: {
      rules: [{test: /\.js$/.// Use a single loader
          // loader: "babel-loader",
          // Use Happypack to handle babel-loader separately
          loader: "Happypack? loader='babel-loader'".// Use multiple loaders
          /*use: [ { loader: "babel-loader" } ]*/}},plugins: [
      new Happupack({
        id: "babel-loader".threadPool: happyPackThreadPool
      })
    ]
  }
Copy the code

Q: Webpack solution A: As follows:

  1. Process the module contents
> Preferentially use loader > Loader processes files of a certain type. A file is equal to a moduleCopy the code
  // myloader.js
  module.exports = function(content){
    / / do processing
  }
Copy the code
  1. Add special features
> Custom pluginsCopy the code
  function A() {

  }
  A.prototype.apply = function(compiler){
    // Use apply to listen for a packaged cycle
    / / done, emit,...
    compiler.hooks.done.tap("dist".function(compilation){
      The dist directory has been generated
      / / do processing})}Copy the code
  1. Package simplified, variable configuration
A multi-page application's entry file can extract a method that returns a collection of entry filesCopy the code