angular - 从 WebPack 迁移到 Angular-CLI 6

Question

我需要将配置了WebPack的Angular 6项目迁移到Angular-CLI 6，我担心会破坏某些东西，所以我需要一些指导来获取好的代码并实现这个目标。

关注我的大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'
            }
          }
        ]
      }

并且使用 split .js entry( outputhash-chunk) 让代码更容易加载到浏览器：

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')
  },

任何帮助都是有效的，谢谢！

标签： angularwebpackangular-cli-v6