Config Webpack - hoangtranson/angular6-starter GitHub Wiki

npm install --save-dev html-webpack-plugin copy-webpack-plugin webpack
npm install —save-dev @ngtools/webpack @angular/compiler-cli script-ext-html-webpack-plugin

and config webpack.config.js like this

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');


module.exports = function () {
    return {
        entry: './src/main.ts',
        output: {
            path: __dirname + '/dist',
            filename: 'app.js'
        },
        resolve: {
            extensions: ['.ts', '.js']
        },

        module: {
          rules: [
              {test: /\.ts$/, loaders: ['@ngtools/webpack']},
              { test: /\.css$/, loader: 'raw-loader' },
              { test: /\.html$/, loader: 'raw-loader' }
          ]
       },
        plugins: [
            new CopyWebpackPlugin([
                { from: 'src/assets', to: 'assets'}
            ]),
            new HtmlWebpackPlugin({
                template: __dirname + '/src/index.html',
                output: __dirname + '/dist',
                inject: 'head'
            }),

            new ScriptExtPlugin({
                defaultAttribute: 'defer'
            }),
     new AngularCompilerPlugin({
               tsConfigPath: './tsconfig.json',
               entryModule: './src/app/app.module#AppModule',
               sourceMap: true
            })

        ]
    };
}

Error:

Add

module: {
          rules: [
              {test: /\.ts$/, loaders: ['@ngtools/webpack']},
              { test: /\.css$/, loader: 'raw-loader' },
              { test: /\.html$/, loader: 'raw-loader' }
          ]
       },

And got some warning after config

fixed

// Ignore warnings about System.import in Angular
{ test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } },

ref: https://webpack.js.org/configuration/performance/#performance-maxentrypointsize

fixed:

performance: {
   maxEntrypointSize: 512000,
   maxAssetSize: 512000
},

Mode warnning:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

fixed:

"dev": "webpack --mode=development",
"prod": "webpack --mode=production"