用於AngularJS 1.x應用程序的webpack 2的最佳webpack.config？

我想從頭開始設置一個角1.x的應用程序中使用的WebPack 2.用於AngularJS 1.x應用程序的webpack 2的最佳webpack.config？

我無法找到的webpack.config的最佳配置，以最佳entry和output生產（意思是，所有的代碼，風格和模板縮小和gziped沒有代碼重複）。

我的主要問題是如何建立webpack.config使其能夠識別我的項目的文件夾結構中的所有的諧音，象：

我目前的配置文件，以供參考（可」看不到子文件夾）：

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    devServer: { 
     compress: true, 
     contentBase: path.join(__dirname, '/dist'), 
     open: true, 
     port: 9000, 
     stats: 'errors-only' 
    }, 
    entry: './src/app.js', 
    output: { 
     path: path.join(__dirname, '/dist'), 
     filename: 'app.bundle.js' 
    }, 
    module: { 
     rules: [ { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: [ 
        'css-loader', 
        'sass-loader' 
       ], 
       publicPath: '/dist' 
      }) 
     } ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      hash: true, 
      minify: { collapseWhitespace: true }, 
      template: './src/index.html', 
      title: 'Prov' 
     }), 
     new ExtractTextPlugin({ 
      filename: 'main.css', 
      allChunks: true 
     }) 
    ] 
};

來源

2017-04-24 Tiago

所以你有'app.js'你想要將你的partials導入到app.js中或者將'proverb-list.js'作爲單獨的指令/控制器來編譯嗎？ –

如果我在理解你的問題時是正確的（即通過webpack編譯局部變量）你有兩個選擇，1.將你的局部變量（通過glob或者per-file）推入入口，或者2.將它們導入到app.js和commonChuck。 - –

是的我認爲你正確地理解它，選項2是否意味着我應該使用require將所有js文件導入到'app.js'，並且所有'html'模板也都使用require？ – Tiago

注意，這不是一個詳盡的解決方案，因爲有很多的優化可以在前臺做了，我已經把代碼段相當短。

使用webpack，您可以採取幾條路徑將部分路徑包含到您的app.js中。

解決方案1 
可以內app.js導入/需要你的泛音這樣：

app.js

var angular = require('angular'); 
var proverbList = require('./proverb/list/proverb.list'); 
// require other components 

// set up your app as normal

這使得app.bundle.js，包括您的組件在js文件主要捆綁。您還可以使用html-loader在最終捆綁包中包含模板。

這不是理想的，因爲它所做的就是創建一個大型bundle.js（不利用多下載與http2也不允許的組件/文件加載當用戶明確要求的話）。

解決方案2
導入的諧音作爲單獨項文件到您的WebPack包：

webpack.config.js

const globby = require('globby'); 
const sourceDir = 'src'; 
var webpackentry = { 
    app: `${__dirname}/src/app.js` 
}; 

const glob = globby.sync(`${__dirname}/${sourceDir}/**/*.js`) 
    .map((file)=>{ 
    let name = file.split('/').pop().replace('.js', ''); 
    webpackentry[name] = file; 
}); 


const config = { 
    entry: webpackentry, 
    ... 
}

第二種解決方案是非正統的，但它可以是如果有用的話你想把你所有的partials分解爲你的html中的<script>標籤（例如，如果你的公司/團隊使用它作爲包含你的指令/組件/控制器的手段），或者如果你有一個app-2.bundle.js。

解決方案3
使用CommonsChunkPlugin：

webpack.config。JS

let webpackentry = { 
    vendor: [ 
    'module1', 
    'module2', 
    'module3', 
    ] 
} 
... 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: ['vendor'] //... add other modules 
    }) 
]

CommonsChunkPlugin允許的WebPack通過您的項文件亂寫和辨別是它們之間共享的公共模塊。這意味着即使您在不同的文件中導入module1，它們也只會在您的最終捆綁包中被編譯一次。

來源

2017-04-24 15:21:12

之下添加一個答案即使在閱讀官方文檔後，我也不確定我是否理解了'manifest'文件中的內容，即：「我們需要將運行時抽取到單獨的清單文件中」。這個文件到底是什麼，它與普通的'entry.js'或'app.js'有什麼不同？ – Tiago

來自survive.js的引用當webpack編寫捆綁包時，它也保持一個清單。清單描述了webpack應該加載的文件。可以提取它，並開始加載項目的文件更快，而不必等待供應商捆綁被加載。' –

我的意思是你可以省略'清單'從答案 –

用於AngularJS 1.x應用程序的webpack 2的最佳webpack.config？

回答

相關問題