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
            })
        ])
    }

  • 相关阅读:
    王晶:华为云OCR文字识别服务技术实践、底层框架及应用场景 | AI ProCon 2019【华为云技术分享】
    华为云实战开发】5.如何快速创建免费Git代码仓库【华为云技术分享】
    【华为云实战开发】9.如何进行PHP项目的快速搭建并实现CICD?【华为云技术分享】
    Linux入侵痕迹检测方案【华为云技术分享】
    【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图【华为云技术分享】
    Python如何爬取实时变化的WebSocket数据【华为云技术分享】
    遍历json
    选中文字弹出提示
    基本动画函数
    动画的基本原理
  • 原文地址:https://www.cnblogs.com/Alan2016/p/6814033.html
Copyright © 2011-2022 走看看