webpack简单配置

1、下载相关依赖包

'use strict';

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var dts = require('dts-bundle');
var rimraf = require('rimraf');
var GenerateJsonPlugin = require('generate-json-webpack-plugin');
var packageJson = require('./package.json');
var fs = require('fs');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var configs = require('./config');


module.exports = function(options) {
    var packagePath = './'+options.buildType+'/';
    var extractCSS = new ExtractTextPlugin({ filename: packagePath + 'surveyeditor.css' });

    var config = {
        entry: {
            'surveyeditor': path.resolve(__dirname, './src/entries/index.ts')
        },
        resolve: {
            extensions: ['.js', '.ts', '.tsx', '.scss'],
            alias: {
                tslib:  path.join(__dirname, './src/entries/helpers.ts')
            }
        },
        module: {
             loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                fallbackLoader: 'style',
                loader: 'css',
                publicPath: '../'
                    })
                },
            ],
            rules: [
                {
                    test: /\.(ts|tsx)$/,
                    loader: 'ts-loader',
                    options: {
                        compilerOptions: {
                            'declaration': options.buildType === 'test',
                            'outDir': packagePath + 'typings/'
                        }
                    }
                },
                {
                    test: /\.scss$/,
                    loader: extractCSS.extract({
                        fallbackLoader: 'style-loader',
                        loader: 'css-loader!sass-loader'
                    })
                },
                {
                    test: /\.html$/,
                    loader: 'html-loader'
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    use: {
                        loader: 'url-loader',
                        options: {}
                    }
                }
            ]
        },
        output: {
            filename: packagePath +'js/'+'[name].js',
            library: 'SurveyEditor',
            libraryTarget: 'umd',
            umdNamedDefine: true
        },
        externals: {
            'jquery': {
                root: 'jQuery',
                commonjs2: 'jquery',
                commonjs: 'jquery',
                amd: 'jquery'
            },
            'knockout': {
                root: 'ko',
                commonjs2: 'knockout',
                commonjs: 'knockout',
                amd: 'knockout'
            },
            'bootstrap': {
                root: 'bootstrap',
                commonjs2: 'bootstrap',
                commonjs: 'bootstrap',
                amd: 'bootstrap'
            },
            'survey-knockout': {
                root: 'Survey',
                commonjs2: 'survey-knockout',
                commonjs: 'survey-knockout',
                amd: 'survey-knockout'
            }
        },
        plugins: [
            //复制
             new CopyWebpackPlugin([
                    {
                        from: './src/pages',
                        to:packagePath
                    },

                ], {
                    ignore: [],
                    copyUnmodified: true,
                }),        
            extractCSS
        ],
        // 配置 webpack-dev-server
        devServer:{
            contentBase:packagePath,
            historyApiFallback: true,
            inline: true,
            port: configs.dev.port // 修改端口，一般默认是8080
        },
        devtool: 'inline-source-map'
    };
       config.plugins = config.plugins.concat([
            new webpack.LoaderOptionsPlugin({ debug: true})
        ]);
    return config;
};

在package.json中添加以下代码：

    "scripts": {
        "build_dev": "webpack --env.buildType dev",
        "build_test": "webpack --env.buildType test",
        "build_prod": "webpack --env.buildType prod",
        "start": "webpack-dev-server --no-inline --hot --env.buildType dev"
    ｝

根据选择打包环境执行不同的命令
npm run build_test //执行测试环境上的打包