从WebPack迁移到Angular-CLI 6

时间:2019-01-03 18:48:50

标签: angular webpack angular-cli-v6

我需要将配置了 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'
            }
          }
        ]
      }

entryoutput使用拆分的.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')
  },

任何帮助都是有效的,谢谢!

0 个答案:

没有答案