javascript - Angular 1 + webpack produces huge file -
i have been working on angular webpack seed
after installing modules, saw app.bundle.js file becomes 15mb, , took time.
i have tried changing devtool to
config.devtool = 'cheap-module-source-map'; it reduces file size 200kb almost, good, application crashed angular error
error: [$injector:unpr] unknown provider: t
'use strict'; // modules var path = require('path'); var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); var htmlwebpackplugin = require('html-webpack-plugin'); var extracttextplugin = require('extract-text-webpack-plugin'); var copywebpackplugin = require('copy-webpack-plugin'); /** * env * npm lifecycle event identify environment */ var env = process.env.npm_lifecycle_event; var istest = env === 'test' || env === 'test-watch'; var isprod = env === 'build'; module.exports = function makewebpackconfig() { /** * config * reference: http://webpack.github.io/docs/configuration.html * object configuration gets set */ var config = {}; /** * entry * reference: http://webpack.github.io/docs/configuration.html#entry * should empty object if it's generating test build * karma set when it's test build */ config.entry = istest ? void 0 : { app: './app/app.js' }; /** * output * reference: http://webpack.github.io/docs/configuration.html#output * should empty object if it's generating test build * karma handle setting when it's test build */ config.output = istest ? {} : { // absolute output directory path: __dirname + '/dist', // output path view of page // uses webpack-dev-server in development publicpath: isprod ? '/' : 'http://localhost:8080/', // filename entry points // adds hash in build mode filename: isprod ? '[name].[hash].js' : '[name].bundle.js', // filename non-entry points // adds hash in build mode chunkfilename: isprod ? '[name].[hash].js' : '[name].bundle.js' }; /** * devtool * reference: http://webpack.github.io/docs/configuration.html#devtool * type of sourcemap use per build type */ if (istest) { config.devtool = 'inline-source-map'; } else { config.devtool = 'eval-source-map'; } /** * loaders * reference: http://webpack.github.io/docs/configuration.html#module-loaders * list: http://webpack.github.io/docs/list-of-loaders.html * handles of magic responsible converting modules */ // initialize module config.module = { rules: [{ // js loader // reference: https://github.com/babel/babel-loader // transpile .js files using babel-loader // compiles es6 , es7 es5 code test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { // css loader // reference: https://github.com/webpack/css-loader // allow loading css through js // // reference: https://github.com/postcss/postcss-loader // postprocess css postcss plugins test: /\.css$/, // reference: https://github.com/webpack/extract-text-webpack-plugin // extract css files in production builds // // reference: https://github.com/webpack/style-loader // use style-loader in development. loader: istest ? 'null-loader' : extracttextplugin.extract({ fallbackloader: 'style-loader', loader: [ {loader: 'css-loader', query: {sourcemap: true}}, {loader: 'postcss-loader'} ], }) }, { // asset loader // reference: https://github.com/webpack/file-loader // copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files output // rename file using asset hash // pass along updated reference code // can add here file extension want copied output test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file-loader' }, { // html loader // reference: https://github.com/webpack/raw-loader // allow loading html through js test: /\.html$/, loader: 'raw-loader' }] }; // istanbul loader // https://github.com/deepsweet/istanbul-instrumenter-loader // instrument js files istanbul-lib-instrument subsequent code coverage reporting // skips node_modules , files end .test if (istest) { config.module.rules.push({ enforce: 'pre', test: /\.js$/, exclude: [ /node_modules/, /\.spec\.js$/ ], loader: 'istanbul-instrumenter-loader', query: { esmodules: true } }) } /** * postcss * reference: https://github.com/postcss/autoprefixer-core * add vendor prefixes css */ // note: handled in `postcss.config.js` // webpack2 has issues, making config file necessary /** * plugins * reference: http://webpack.github.io/docs/configuration.html#plugins * list: http://webpack.github.io/docs/list-of-plugins.html */ config.plugins = [ new webpack.loaderoptionsplugin({ test: /\.scss$/i, options: { postcss: { plugins: [autoprefixer] } } }), new webpack.provideplugin({ $: 'jquery', jquery: 'jquery' }) ]; // skip rendering index.html in test mode if (!istest) { // reference: https://github.com/ampedandwired/html-webpack-plugin // render index.html config.plugins.push( new htmlwebpackplugin({ template: './app/index.html', inject: 'body' }), // reference: https://github.com/webpack/extract-text-webpack-plugin // extract css files // disabled when in test mode or not in build mode new extracttextplugin({filename: 'css/[name].css', disable: !isprod, allchunks: true}) ) } // add build specific plugins if (isprod) { config.plugins.push( // reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin // emit files when there no errors new webpack.noemitonerrorsplugin(), // reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin // dedupe modules in output //new webpack.optimize.dedupeplugin(), // reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin // minify javascript, switch loaders minimizing mode new webpack.optimize.uglifyjsplugin(), // copy assets public folder // reference: https://github.com/kevlened/copy-webpack-plugin new copywebpackplugin([ { from: path.resolve(__dirname, 'app/assets'), to: path.resolve(__dirname, 'dist/assets') } ]) ) } /** * dev server configuration * reference: http://webpack.github.io/docs/configuration.html#devserver * reference: http://webpack.github.io/docs/webpack-dev-server.html */ config.devserver = { contentbase: './dist', stats: 'minimal' }; return config; }();
Comments
Post a Comment