zoukankan      html  css  js  c++  java
  • webpack 配置

    var path = require('path');
    var webpack = require('webpack');
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    var HtmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
        entry: {
            main: './app/index.js',
            vendor: 'moment'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[chunkhash].[name].js'
        },
        module: {
            rules: [{
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                        /*minChunks: function(module) {
                            // 该配置假定你引入的 vendor 存在于 node_modules 目录中
                            return module.context && module.context.indexOf('node_modules') !== -1;
                        }*/
                })
            }, {
                test: /.(jpg|png|gif)$/,
                loader: 'file-loader'
            }, {
                test: /.(woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }]
        },
        plugins: [
                new ExtractTextPlugin('style/common.css'),
                new webpack.optimize.CommonsChunkPlugin({
                    name: 'vendor' // 指定公共 bundle 的名字。
                }),
                new HtmlWebpackPlugin({
                    template: './index.html'
                        // chunksSortMode: 'dependency'
                })
            ]
            /*module: {
                rules: [{
                    test: /.css$/,
                    loaders: [
                        use: [{
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            query: {
                                options: {
                                    modules: true
                                }
                            }
                        }]
                    ]
                }, {
                    test: /.jsx$/,
                    loader: "babel-loader",
                    options: {
                        //......
                    }
                }]
            }*/
    };


    if (process.env.NODE_ENV === 'production') {
        module.exports.devtool = '#source-map'
            // http://vue-loader.vuejs.org/en/workflow/production.html
        module.exports.plugins = (module.exports.plugins || []).concat([
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: '"production"'
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                sourceMap: true,
                compress: {
                    warnings: false
                }
            }),
            new webpack.LoaderOptionsPlugin({
                minimize: true
            })
        ])
    }

  • 相关阅读:
    并发编程(2)-进程、并发和并行讲解
    并发编程(5)-管道、数据共享、进程池
    并发编程(4)-进程中的锁、信号量、 事件和队列
    人工智能及数学运算的基础方法
    并发编程(3)-进程模块
    判断一个数是否是水仙花数
    js中隐式类型转换测试
    webpack使用webpack-dev-middleware进行热重载
    网页打包安卓APP流程
    「postgres」查看数据库连接数
  • 原文地址:https://www.cnblogs.com/Alan2016/p/6814033.html
Copyright © 2011-2022 走看看