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 //执行测试环境上的打包