基本配置webpack.config.js

const path = require('path'); module.exports = { mode: "production", // "production" | "development" | "none" // 告訴webpack是生產環境還是開發環境. entry: "./app/entry", // string | object | array // 默認 ./src // 入口起點，可以指定多個入口起點 output: { // 輸出，只可指定一個輸出配置 path: path.resolve(__dirname, "dist"), // string // 所有輸出文件所在的目錄 // 必須是絕對路徑(use the Node.js path module) filename: "bundle.js", // string // 輸出文件的名稱 publicPath: "/assets/", // string // 相對於HTML頁面解析的輸出目錄的url library: "MyLibrary", // string, //導出庫的名稱 libraryTarget: "umd", // universal module definition // the type of the exported library module: { //如何處理項目中不同類型的模塊 rules: [ //用於規定在不同模塊被創建時如何處理模塊的規則數組 { test: /\.jsx?$/, //匹配特定文件的正則表達式或正則表達式數組 include: [ //規則適用的范圍 path.resolve(__dirname, "app") ], exclude: [ //規則排除的范圍 path.resolve(__dirname, "app/demo-files") ], issuer: { test, include, exclude }, enforce: "pre", enforce: "post", loader: "babel-loader", //加載器 options: { //轉義 presets: ["es2015"] }, }, { test: /\.html$/, use: [ "htmllint-loader", { loader: "html-loader", options: { /* ... */ } } ] }, ], }, resolve: { // 解決模塊請求的選項 modules: [ "node_modules", path.resolve(__dirname, "app") ], extensions: [".js", ".json", ".jsx", ".css"], // 用到的擴展 alias: { //模塊名稱別名列表 "module": path.resolve(__dirname, "app/third/module.js"), }, }, performance: { hints: "warning", // enum maxAssetSize: 200000, // int (in bytes), maxEntrypointSize: 400000, // int (in bytes) assetFilter: function(assetFilename) { return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); } }, devtool: "source-map", // 代碼映射，增強調試，以構建速度為代價 context: __dirname, // string (絕對路徑) //webpack的主目錄 target: "web", externals: ["react", /^@angular\//], //不要跟蹤/捆綁這些模塊，而是在運行時從環境中請求它們 serve: { port: 1337, content: './dist', // ... }, stats: "errors-only", // 讓你精確地控制被顯示的包信息 devServer: { proxy: { // 代理url '/api': 'http://localhost:3000' }, contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location compress: true, //支持gzip壓縮 historyApiFallback: true, // html在404，對象為多個路徑 hot: true, // 熱模塊替換。取決於HotModuleReplacementPlugin https: false, noInfo: true, // ... }, plugins: [ //webpack插件列表 // ... ],

new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
    }
  }),

Webpack是屬於Node的程序，Node環境下的環境變量，Webpack可以配置，可以靈活讀取。

但是index.js里面是屬於Webpack要構建的產物，如果里面也想讀取環境變量。可以通過這個DefinePlugin定義一下，
index.js里面就可以讀到了。