module.exports = {
 entry: `./index.js`,
}

module.exports = {
 entry: { 
  "index": `./index.js`,
 },
}

// 使用 glob 等工具使用若干通配符，運(yùn)行時(shí)獲得 entry 的條目
module.exports = {
 entry: glob.sync('./project/**/index.js').reduce((acc, path) => {
  const entry = path.replace('/index.js', '')
  acc[entry] = path
  return acc
 }, {}),
}

npm run build --project components

// 解析命令行參數(shù)
const argv = require('minimist')(process.argv.slice(2))
// 項(xiàng)目
const project = argv['project'] || 'index'

module.exports = {
 entry: { 
  "index": `./${project}/index.js`,
 } 
}

module.exports = {
 entry: { 
  "index": `./components/index.js`,
 } 
}

module.exports = {
 output: { 
  // path 必須為絕對(duì)路徑
  // 輸出文件路徑
  path: path.resolve(__dirname, '../../dist/build'),
  // 包名稱
  filename: "[name].bundle.js",
  // 或使用函數(shù)返回名(不常用)
  // filename: (chunkData) => {
  //  return chunkData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
  // },
  // 塊名，公共塊名(非入口)
  chunkFilename: '[name].[chunkhash].bundle.js',
  // 打包生成的 index.html 文件里面引用資源的前綴
  // 也為發(fā)布到線上資源的 URL 前綴
  // 使用的是相對(duì)路徑，默認(rèn)為 ''
  publicPath: '/', 
 }
}

module.exports = {
 output: { 
  // path 必須為絕對(duì)路徑
  // 輸出文件路徑
  path: path.resolve(__dirname, '../../dist/build'),
  // 包名稱
  filename: "[name].bundle.js",
  // 塊名，公共塊名(非入口)
  chunkFilename: '[name].[chunkhash].bundle.js',
  // 打包生成的 index.html 文件里面引用資源的前綴
  // 也為發(fā)布到線上資源的 URL 前綴
  // 使用的是相對(duì)路徑，默認(rèn)為 ''
  publicPath: '/', 
  // 一旦設(shè)置后該 bundle 將被處理為 library
  library: 'webpackNumbers',
  // export 的 library 的規(guī)范，有支持 var, this, commonjs,commonjs2,amd,umd
  libraryTarget: 'umd',
 }
}

module.exports = {
 // 可以是 none、development、production
 // 默認(rèn)為 production
 mode: 'production'
}

"build:prod": "webpack --config config/webpack.prod.config.js --mode production"

// webpack.prod.config.js
module.exports = {
 mode: 'production',
}

// webpack.prod.config.js
module.exports = {
 performance: {
  // 性能設(shè)置,文件打包過大時(shí)，會(huì)報(bào)警告
  hints: 'warning'
 },
 output: {
  // 打包時(shí)，在包中不包含所屬模塊的信息的注釋
  pathinfo: false
 },
 optimization: {
  // 不使用可讀的模塊標(biāo)識(shí)符進(jìn)行調(diào)試
  namedModules: false,
  // 不使用可讀的塊標(biāo)識(shí)符進(jìn)行調(diào)試
  namedChunks: false,
  // 設(shè)置 process.env.NODE_ENV 為 production
  nodeEnv: 'production',
  // 標(biāo)記塊是否是其它塊的子集
  // 控制加載塊的大?。虞d較大塊時(shí)，不加載其子集）
  flagIncludedChunks: true,
  // 標(biāo)記模塊的加載順序，使初始包更小
  occurrenceOrder: true,
  // 啟用副作用
  sideEffects: true,
  // 確定每個(gè)模塊的使用導(dǎo)出，
  // 不會(huì)為未使用的導(dǎo)出生成導(dǎo)出
  // 最小化的消除死代碼
  // optimization.usedExports 收集的信息將被其他優(yōu)化或代碼生成所使用
  usedExports: true,
  // 查找模塊圖中可以安全的連接到其它模塊的片段
  concatenateModules: true,
  // SplitChunksPlugin 配置項(xiàng)
  splitChunks: {
   // 默認(rèn) webpack4 只會(huì)對(duì)按需加載的代碼做分割
   chunks: 'async',
   // 表示在壓縮前的最小模塊大小,默認(rèn)值是30kb
   minSize: 30000,
   minRemainingSize: 0,
   // 旨在與HTTP/2和長(zhǎng)期緩存一起使用 
   // 它增加了請(qǐng)求數(shù)量以實(shí)現(xiàn)更好的緩存
   // 它還可以用于減小文件大小，以加快重建速度。
   maxSize: 0,
   // 分割一個(gè)模塊之前必須共享的最小塊數(shù)
   minChunks: 1,
   // 按需加載時(shí)的最大并行請(qǐng)求數(shù)
   maxAsyncRequests: 6,
   // 入口的最大并行請(qǐng)求數(shù)
   maxInitialRequests: 4,
   // 界定符
   automaticNameDelimiter: '~',
   // 塊名最大字符數(shù)
   automaticNameMaxLength: 30,
   cacheGroups: { // 緩存組
    vendors: {
     test: /[\\/]node_modules[\\/]/,
     priority: -10
    },
    default: {
     minChunks: 2,
     priority: -20,
     reuseExistingChunk: true
    }
   }
  },
  // 當(dāng)打包時(shí)，遇到錯(cuò)誤編譯，將不會(huì)把打包文件輸出
  // 確保 webpack 不會(huì)輸入任何錯(cuò)誤的包
  noEmitOnErrors: true,
  checkWasmTypes: true,
  // 使用 optimization.minimizer || TerserPlugin 來最小化包
  minimize: true,
 },
 plugins: [
  // 使用 terser 來優(yōu)化 JavaScript
  new TerserPlugin(/* ... */),
  // 定義環(huán)境變量
  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
  // 預(yù)編譯所有模塊到一個(gè)閉包中，提升代碼在瀏覽器中的執(zhí)行速度
  new webpack.optimize.ModuleConcatenationPlugin(),
  // 在編譯出現(xiàn)錯(cuò)誤時(shí)，使用 NoEmitOnErrorsPlugin 來跳過輸出階段。
  // 這樣可以確保輸出資源不會(huì)包含錯(cuò)誤
  new webpack.NoEmitOnErrorsPlugin()
 ]
}

// webpack.dev.config.js
module.exports = {
 mode: 'development',
}

// webpack.dev.config.js
module.exports = {
 devtool: 'eval',
 cache: true,
 performance: {
  // 性能設(shè)置,文件打包過大時(shí)，不報(bào)錯(cuò)和警告，只做提示
  hints: false
 },
 output: {
  // 打包時(shí)，在包中包含所屬模塊的信息的注釋
  pathinfo: true
 },
 optimization: {
  // 使用可讀的模塊標(biāo)識(shí)符進(jìn)行調(diào)試
  namedModules: true,
  // 使用可讀的塊標(biāo)識(shí)符進(jìn)行調(diào)試
  namedChunks: true,
  // 設(shè)置 process.env.NODE_ENV 為 development
  nodeEnv: 'development',
  // 不標(biāo)記塊是否是其它塊的子集
  flagIncludedChunks: false,
  // 不標(biāo)記模塊的加載順序
  occurrenceOrder: false,
  // 不啟用副作用
  sideEffects: false,
  usedExports: false,
  concatenateModules: false,
  splitChunks: {
   hidePathInfo: false,
   minSize: 10000,
   maxAsyncRequests: Infinity,
   maxInitialRequests: Infinity,
  },
  // 當(dāng)打包時(shí)，遇到錯(cuò)誤編譯，仍把打包文件輸出
  noEmitOnErrors: false,
  checkWasmTypes: false,
  // 不使用 optimization.minimizer || TerserPlugin 來最小化包
  minimize: false,
  removeAvailableModules: false
 },
 plugins: [
  // 當(dāng)啟用 HMR 時(shí)，使用該插件會(huì)顯示模塊的相對(duì)路徑
  // 建議用于開發(fā)環(huán)境
  new webpack.NamedModulesPlugin(),
  // webpack 內(nèi)部維護(hù)了一個(gè)自增的 id，每個(gè) chunk 都有一個(gè) id。
  // 所以當(dāng)增加 entry 或者其他類型 chunk 的時(shí)候，id 就會(huì)變化，
  // 導(dǎo)致內(nèi)容沒有變化的 chunk 的 id 也發(fā)生了變化
  // NamedChunksPlugin 將內(nèi)部 chunk id 映射成一個(gè)字符串標(biāo)識(shí)符（模塊的相對(duì)路徑）
  // 這樣 chunk id 就穩(wěn)定了下來
  new webpack.NamedChunksPlugin(),
  // 定義環(huán)境變量
  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
 ]
}

// webpack.com.config.js
module.exports = {
 mode: 'none',
}

// webpack.com.config.js
module.exports = {
 performance: {
  // 性能設(shè)置,文件打包過大時(shí)，不報(bào)錯(cuò)和警告，只做提示
  hints: false
 },
 optimization: {
  // 不標(biāo)記塊是否是其它塊的子集
  flagIncludedChunks: false,
  // 不標(biāo)記模塊的加載順序
  occurrenceOrder: false,
  // 不啟用副作用
  sideEffects: false,
  usedExports: false,
  concatenateModules: false,
  splitChunks: {
   hidePathInfo: false,
   minSize: 10000,
   maxAsyncRequests: Infinity,
   maxInitialRequests: Infinity,
  },
  // 當(dāng)打包時(shí)，遇到錯(cuò)誤編譯，仍把打包文件輸出
  noEmitOnErrors: false,
  checkWasmTypes: false,
  // 不使用 optimization.minimizer || TerserPlugin 來最小化包
  minimize: false,
 },
 plugins: []
}

// webpack編譯過程中設(shè)置全局變量process.env
new webpack.DefinePlugin({
 'process.env': require('../config/dev.env.js')
}

module.exports ={
 // 或 '"production"' ，環(huán)境變量的值需要是一個(gè)由雙引號(hào)包裹的字符串
 NODE_ENV: JSON.stringify('production') 
}

cross-env NODE_ENV=production webpack --config webpack.config.prod.js

new webpack.EnvironmentPlugin({
 NODE_ENV: 'production',
});

module.exports = {
 resolve: {
  // 設(shè)置模塊導(dǎo)入規(guī)則，import/require時(shí)會(huì)直接在這些目錄找文件
  // 可以指明存放第三方模塊的絕對(duì)路徑，以減少尋找，
  // 默認(rèn) node_modules
  modules: [path.resolve(`${project}/components`), 'node_modules'],
  // import導(dǎo)入時(shí)省略后綴
  // 注意：盡可能的減少后綴嘗試的可能性
  extensions: ['.js', '.jsx', '.react.js', '.css', '.json'],
  // import導(dǎo)入時(shí)別名，減少耗時(shí)的遞歸解析操作
  alias: {
   '@components': path.resolve(`${project}/components`),
   '@style': path.resolve('asset/style'),
  },
  // 很多第三方庫會(huì)針對(duì)不同的環(huán)境提供幾份代碼
  // webpack 會(huì)根據(jù) mainFields 的配置去決定優(yōu)先采用那份代碼
  // 它會(huì)根據(jù) webpack 配置中指定的 target 不同，默認(rèn)值也會(huì)有所不同
  mainFields: ['browser', 'module', 'main'],
 },
}

module.exports = {
 module: {
  // 指明 webpack 不去解析某些內(nèi)容，該方式有助于提升 webpack 的構(gòu)建性能
  noParse: /jquery/,
  rules: [
   {
    // 這里編譯 js、jsx
    // 注意：如果項(xiàng)目源碼中沒有 jsx 文件就不要寫 /\.jsx?$/，提升正則表達(dá)式性能
    test: /\.(js|jsx)$/,
    // 指定要用什么 loader 及其相關(guān) loader 配置
    use: {
     loader: "babel-loader",
     options: {
      // babel-loader 支持緩存轉(zhuǎn)換出的結(jié)果，通過 cacheDirectory 選項(xiàng)開啟
      // 使用 cacheDirectory 選項(xiàng)將 babel-loader 的速度提高2倍
   		cacheDirectory: true,
   		// Save disk space when time isn't as important
   		cacheCompression: true,
   		compact: true,   
     }
    },
    // 排除 node_modules 目錄下的文件
    // node_modules 目錄下的文件都是采用的 ES5 語法，沒必要再通過 Babel 去轉(zhuǎn)換
    exclude: /node_modules/
    // 也可以配置 include：需要引入的文件
   }
  ]
 }
}

// 配置 .babelrc
{
 "presets": [
  [
   "@babel/preset-env",
  ],
  "@babel/preset-react"
 ],
 "plugins": [
  [
   "@babel/plugin-proposal-class-properties",
   {
    "loose": true
   }
  ],
  [
   "@babel/plugin-transform-runtime",
   {
    "absoluteRuntime": false,
    "corejs": false,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
   }
  ],
 ]
}

// postcss.config.js
module.exports = { // 解析CSS文件并且添加瀏覽器前綴到 CSS 內(nèi)容里
	plugins: [require('autoprefixer')],
};

const path = require('path');
module.exports = {
 entry: path.resolve(__dirname, 'src/index.js'),
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[contenthash].js',
 },
 optimization: {
  splitChunks: {
   // 對(duì)所有的包進(jìn)行拆分
   chunks: 'all',
  },
 },
};

module.exports = {
 entry: {
  main: path.resolve(__dirname, 'src/index.js'),
  ProductList: path.resolve(__dirname, 'src/ProductList/ProductList.js'),
  ProductPage: path.resolve(__dirname, 'src/ProductPage/ProductPage.js'),
  Icon: path.resolve(__dirname, 'src/Icon/Icon.js'),
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[contenthash:8].js',
 },
};

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: path.resolve(__dirname, 'src/index.js'),
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[contenthash].js',
 },
 optimization: {
  runtimeChunk: 'single',
  splitChunks: {
   chunks: 'all',
   maxInitialRequests: Infinity,
   minSize: 0,
   cacheGroups: {
    vendor: {
     test: /[\\/]node_modules[\\/]/,
     name(module) {
      // 獲取第三方包名
      const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

      // npm 軟件包名稱是 URL 安全的，但是某些服務(wù)器不喜歡@符號(hào)
      return `npm.${packageName.replace('@', '')}`;
     },
    },
   },
  },
 },
};

import React, { useState, useEffect } from 'react';
import './index.scss'

function Main() {
 const [NeighborPage, setNeighborPage] = useState(null)

 useEffect(() => {
  import('../neighbor').then(({ default: component }) => {
   setNeighborPage(React.createElement(component))
  });
 }, [])

 return NeighborPage
  ? NeighborPage
  : <div>Loading...</div>;
}

export default Main

module.exports = {
 plugins: [
  // 優(yōu)化 require
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|zh/),
  // 用于提升構(gòu)建速度
  createHappyPlugin('happy-babel', [{
   loader: 'babel-loader',
   options: {
    presets: ['@babel/preset-env', "@babel/preset-react"],
    plugins: [
     ['@babel/plugin-proposal-class-properties', {
      loose: true
     }]
    ],
    // babel-loader 支持緩存轉(zhuǎn)換出的結(jié)果，通過 cacheDirectory 選項(xiàng)開啟
    cacheDirectory: true,
    // Save disk space when time isn't as important
    cacheCompression: true,
    compact: true,
   }
  }])
 ]
}

module.exports = {
 // 配置如何顯示性能提示
 performance: {
  // 可選 warning、error、false
  // false：性能設(shè)置,文件打包過大時(shí)，不報(bào)錯(cuò)和警告，只做提示
  // warning：顯示警告，建議用在開發(fā)環(huán)境
  // error：顯示錯(cuò)誤，建議用在生產(chǎn)環(huán)境，防止部署太大的生產(chǎn)包，從而影響網(wǎng)頁性能
  hints: false
 }
}

module.export = {
 // 啟用監(jiān)聽模式
 watch: true,
}

webpack --watch --config webpack.config.dev.js

module.export = {
 watch: true,
 // 自定義監(jiān)視模式
 watchOptions: {
  // 排除監(jiān)聽
  ignored: /node_modules/,
  // 監(jiān)聽到變化發(fā)生后，延遲 300ms（默認(rèn)） 再去執(zhí)行動(dòng)作，
  // 防止文件更新太快導(dǎo)致重新編譯頻率太高
  aggregateTimeout: 300,
  // 判斷文件是否發(fā)生變化是通過不停的去詢問系統(tǒng)指定文件有沒有變化實(shí)現(xiàn)的
  // 默認(rèn) 1000ms 詢問一次
  poll: 1000
 }
}

<script
 src="/a1/uploads/allimg/200110/143P41150-0.jpg"
 integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
 crossorigin="anonymous">
</script>

module.exports = {
 // 打包時(shí)排除 jquery 模塊
 externals: {
  jquery: 'jQuery'
 }
};

module.exports = {
 // 編譯為類瀏覽器環(huán)境里可用（默認(rèn)）
 target: 'web'
};

module.exports = {
 cache: false
}

module.exports = {
 name: 'admin-app'
};