webpack 知識點

• output.filename

  注意此選項被稱為檔案名，但是你還是可以使用像 "js/[name]/bundle.js" 這樣的檔案夾結構。

  注意，此選項不會影響那些「按需加載 chunk」的輸出檔案。對于這些檔案，請使用 output.chunkFilename 選項來控制輸出。

• output 中的屬性：chunkFilename，決定了非入口 chunk 的名稱。

output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
           

• output.path是webpack處理檔案後輸出的路徑，對于CSS檔案輸出依然适用，即CSS檔案也将輸出至該目錄；
• webpack 本身隻能處理 JavaScript 子產品，如果要處理其他類型的檔案，就需要使用 loader 進行轉換。

• webpack多入口打包原理：

  entry配置成對象：

entry: {
    pageA: "./pageA",
    pageB: "./pageB"
}
           

如果entry的key有目錄結構：

entry: {
    'pageA/js': "./pageA",
    'pageB/js': "./pageB"
 }
           

會輸出到目錄結構下。

//profile.html
<script src=”dist/profileEntry.js”></script>
//index.html
<script src=”dist/indexEntry.js”></script>
           

• html-webpack-plugin插件，參數chunks告訴插件要引用entry裡面的哪幾個入口。

chunks: ['app', 'vendors'],
           

• 安裝指定版本使用 @ 符号

  舉例：

npm install [email protected]  --save