學習webpack中的核心概念

時間 2020-05-30

標籤學習 webpack 核心概念简体版

原文原文鏈接

一、webpack的做用

是一個現代 JavaScript 應用程序的 靜態模塊打包工具。
可以構建項目的依賴圖，反應出項目中所需的各個模塊，生成一個或多個bundle。

二、entry

entry指明用哪一個文件來做爲依賴圖的起點，而後webpack找到enrty依賴了哪些模塊和庫。webpack從這裏開始轉發。css

module.exports = {
    // 單入口
    entry:'src/index.js' 
    
    //多入口,數組形式
    [
     isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), //isEnvDevelopment = webpackEnv === 'development';
     paths.appIndexJs //appIndexJs: resolveModule(resolveApp, 'src/index'),
    ].filter(Boolean)
}
複製代碼

三、output

指明將webpack打包生成的bundle輸出到哪裏，以及這些bundle的命名規則。html

module.exports = {
    output:{
        path:'build' //bundle輸出到何處
        filename:'[name].bundle.js' //entry中的文件生成的bundle的名稱
        chunkFilename:'[name].[contenthash:8].chunk.js' //非入口(non-entry) chunk 文件的名稱。
        }
}
複製代碼

四、loader

webpack 只能理解 JavaScript 和 JSON 文件。
loader的做用是將其餘類型的文件轉化爲有效的模塊。
module.rules 容許用戶在 webpack 配置中指定多個 loader。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' } //執行順序sass-loader ->css-loader ->style-loader
        ]
      }
    ]
  }
};
複製代碼

五、plugin

插件能夠用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量。能夠用來處理各類各樣的任務。node

//使用一個plugin
//一、須要 require()改插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

module.exports = {
  plugins: [
  //二、屢次使用的插件，經過使用 new 來建立它的一個實例。
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

複製代碼

六、mode

設置相應環境以執行相應的優化(optimization)，默認爲productionreact

module.exports = {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
 }
複製代碼

七、bail

在遇到第一個錯誤時，webpack是否中止打包。webpack

module.exports = {
  bail: true //退出其打包過程
};
複製代碼

八、devtool

指明webpack是否，及如何生成source map。git

module.exports = {
//source-map 原始源代碼
//cheap-module-source-map 原始源代碼（僅限行）
    devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map'
      }
複製代碼

九、optimization

module.exports = {
  //...
  optimization: {
    //是否使用 TerserPlugin 壓縮true bundle。mode爲production時默認爲true
    minimize: false,
    //使用定製 TerserPlugin 實例，覆蓋默認壓縮工具(minimizer)。
    minimizer: [
        new TerserPlugin({
            cache: true,
            parallel: true,
            sourceMap: true, // Must be set to true if using source-maps in production
            terserOptions: {
              // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
            }
      }),
    ],
    // 打包優化策略（待深刻學習）
     splitChunks: {
      // include all types of chunks
      chunks: 'all' 
    },
    // 用於優化緩存（待深刻學習）
     runtimeChunk: true
  }
};
複製代碼

十、resolve

設置模塊如何被解析github

module.exports = {
  resolve: {
    //設置別名
    alias: {
        'react-native': 'react-native-web',
        '~': path.resolve(__dirname, '../src/'),
        '@locale': '@enos/dpl/lib/locale/localeUtils'
      },
    //自動解析擴展名，引入文件時就不須要加上擴展名了
    extensions: ['.wasm', '.mjs', '.js', '.json'], //如引入file.js，只須要import File from '../path/to/file';
    //在哪些目錄下解析模塊
    modules: ['node_modules'],
    //額外使用的插件
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
  }
};
複製代碼

十一、resolveLoader

僅用於解析 webpack 的 loader 包web

十二、module

配置項目中不一樣類型和功能的模塊npm

module.exports = {
  module: {
    rules: [
      {parser: {requireEnsure: false}}, //解析器
      {
        enforce: 'pre', //前置loader
        exclude: /node_modules\/(?!(ansi-styles)\/).*/, //排除哪些文件
        include: paths.appSrc, //包括哪些文件
        loader: require.resolve('url-loader'), //廢棄，支持use替代
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        oneOf: [
          //當規則匹配時，只使用第一個匹配規則。
          {
            resourceQuery: /inline/, // foo.css?inline
            use: 'url-loader',
          },
          {
            resourceQuery: /external/, // foo.css?external
            use: 'file-loader',
          },
        ],
      },
    ],
  },
};

複製代碼

1三、node

這些選項能夠配置是否 polyfill 或 mock 某些 Node.js 全局變量和模塊。json

module.exports = {
  node: {
    dns: 'mock',
    fs: 'empty',
    path: true,
    url: false
  }
};
複製代碼

1四、performance

性能配置

module.exports = {
  performance: {
    hints: false, //false | "error" | "warning" 文件過大時如何報錯
  }
};
複製代碼