webpack.config.js

const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin'); //热更新插件
var WebpackDevServer = require("webpack-dev-server"); //webpack server 服务
var path = require('path')


module.exports = {
    entry: {

        common: ['./static/js/main.js'],
        index: ["./static/js/index.js"]

    },
    output: {
        filename: 'js/[name].js?version=[chunk]',
        path: __dirname + '/dist/static/', //文件生产存放的路径
        publicPath: 'http://localhost:8080/static/' //生产环境可以使用绝对路径 例如http://www.cdn.com/
            //publicPath: '/dist/static/'
    },
    devServer: {
        historyApiFallback: true,
        // contentBase: "./",
        hot: true,
        inline: true,
        stats: { colors: true },
        proxy: {
            '/api': {
                target: 'http://localhost:8050/index.php/api/',
                pathRewrite: { '^/api': '' },
                changeOrigin: true
            }
        }
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                publicPath: '../',
                use: [{
                    loader: 'css-loader',
                    options: {
                        minimize: true, // css压缩,
                        importLoaders: 1,

                    }
                }, {
                    loader: 'postcss-loader',
                    options: {
                        plugins: (loader) => [
                            require('autoprefixer')({
                                broswers: ['last 5 versions']
                            })
                        ]
                    }
                }]
            })
        }, {
            test: /\.(png|gif|jpe?g)$/,
            loader: 'url-loader',
            query: {
                limit: 3500,
                name: 'images/[name].[ext]'
            }
        }, {
            // 文件加载器，处理文件静态资源
            test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader',
            query: {
                limit: 1000,
                name: 'fonts/[name].[ext]'
            }
        }, {
            test: /\.js$/,
            loader: 'babel-loader', //
            exclude: /node_modules/ // 需要排除的目录
        }]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: __dirname + '/dist/index.html',
            template: 'html-withimg-loader!' + "./index.html",
            chunks: ['common', 'index'],
            minify: { //压缩HTML文件
                // removeComments: true, //移除HTML中的注释
                // collapseWhitespace: true //删除空白符与换行符
            }
        }),
        new htmlWebpackPlugin({
            filename: __dirname + '/dist/protocol.html',
            template: 'html-withimg-loader!' + "./protocol.html",
            chunks: ['common']
        }),
        new htmlWebpackPlugin({
            filename: __dirname + '/dist/product_center.html',
            template: 'html-withimg-loader!' + "./product_center.html",
            chunks: ['common']
        }),
        new htmlWebpackPlugin({
            filename: __dirname + '/dist/solution.html',
            template: 'html-withimg-loader!' + "./solution.html",
            chunks: ['common']
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                // warnings: false
            }
        }),
        new ExtractTextPlugin('css/bundle.min.css?version=[hash]'),
        new webpack.HotModuleReplacementPlugin(), //热加载插件
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"'
        })

    ]
}