我需要将配置了 WebPack 的 Angular 6 项目迁移到 Angular-CLI 6 >,我担心会损坏某些东西,因此我需要一些指导以获取良好的代码并实现此目标。
遵循我的 big WebPack文件的一些示例:
某些插件:
//Plugins Nest - OPTIONS
var extractSassPlugin = new ExtractTextPlugin({
filename: 'css/app.global.css', // This is not just t
allChunks: true
});
var extractCssPlugin = new ExtractTextPlugin({
filename: 'css/app.modules.css', // This is not just t
allChunks: true
});
var htmlPlugin = new HtmlWebpackPlugin({
template: 'src/index.html'
});
var cleanPlugin = new CleanWebpackPlugin(['dist']);
var optionsPlugin = new webpack.LoaderOptionsPlugin({
debug: DEV_ENV || LOCAL_ENV || KARMA
});
var uglifyJs;
if (PROD_ENV === true) {
uglifyJs = new UglifyJsPlugin({
//.. Just if, the code is minified
uglifyOptions: {
compress: true,
comments: false
}
});
} else {
uglifyJs = new UglifyJsPlugin({
//.. Just if, the code is minified
});
}
我有一些 CopyWebpackPlugin :
new CopyWebpackPlugin([
{ from: 'src/somewhere', to: 'js/libs/somewhere-else' },
要编译的一些特定.css
扩展名:
{
test: /\.print\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].min.css',
outputPath: 'css/print/',
publicPath: '../'
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed'
}
}
]
}
entry
和output
使用拆分的.js(哈希块)使代码更易于加载到浏览器:
entry: {
polyfills: './src/polyfills.browser.ts',
vendor: './src/vendor.browser.ts',
main: outputMain
},
output: {
filename: '[name]-[hash].js',
chunkFilename: '[name]-[hash]-chunk.js',
path: path.resolve(__dirname, 'dist')
},
任何帮助都是有效的,谢谢!