webpack.dev.js

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');

const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');

const ENV = 'development';   //开发环境

module.exports = webpackMerge(commonConfig({env: ENV}), {   //配置环境通过export暴露
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './build/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/auth'
            ],
            target: 'http://127.0.0.1:8080',
            secure: false
        }],
        watchOptions: {
            ignored: /node_modules/
        }
    },
    entry: {   //配置打包的入口文件
        polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/css/global.css',
        main: './src/main/webapp/app/app.main'
    },
    output: {   //打包输出文件的配置
        path: utils.root('build/www'),    //表示生成文件的根目录，path仅仅告诉webpack结果存储在哪里
        filename: 'app/[name].bundle.js',   //命名出来的入口文件，[name]指代入口文件的name
        chunkFilename: 'app/[id].chunk.js'
    },
    module: {   //用来进行模块加载的相关配置  类似工厂加工过程中对材料的不同处理
        //1.test参数用来指示当前配置针对那些资源，该值应是一个条件值(condition);
        //2.loader/loaders参数，用来指示用哪个或那些loader来处理目标资源，这两个表达的是同一个意思 指示写法不同，
        //loader写成一行，多个loader使用!分割，这种形式类似于管道的概念，或者说是函数式编程，形如：loader:'css?!postcss!less',可以看出
        //目标资源先经过lessloader处理后将结果交给postcss-loader进一步处理，然后再交给css-loader。
        //3.exclude参数用来剔除需要忽略的资源，该值应是一个条件值(condition);
        //4.include参数用来表示表示loader配置针对那些目录或文件  该值是一个条件值；
        //同时使用include和exculde的时候，两者是and关系

        rules: [{
            test: /\.ts$/,
            enforce: 'pre',
            loaders: 'tslint-loader',
            exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
        },
            {
                test: /\.ts$/,
                loaders: [
                    'angular2-template-loader',
                    'awesome-typescript-loader'
                ],
                exclude: ['node_modules/generator-jhipster']
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader'],
                exclude: /(vendor\.css|global\.css)/
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
                exclude: /(vendor\.css|global\.css)/
            },
            {
                test: /(vendor\.css|global\.css)/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                loader: ["babel-loader"],
                exclude: /node_modules/
            }]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9000,
            proxy: {
                target: 'http://localhost:9061'
            }
        }, {
            reload: false
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new writeFilePlugin(),
        new webpack.WatchIgnorePlugin([
            utils.root('src/test'),
        ]),
        new WebpackNotifierPlugin({
            title: 'JHipster',
            contentImage: path.join(__dirname, 'logo-jhipster.png')
        })
    ]
});