鍍金池/ 問答/HTML5  HTML/ wenpack配置拿不到環(huán)境變量

wenpack配置拿不到環(huán)境變量

我按照webpack官訪文檔設(shè)置了dev和prod環(huán)境的配置;一直報(bào)下面這個(gè)錯(cuò):拿不到環(huán)境的變量,這個(gè)是什么問題?。?

clipboard.png


**配置代碼如下:**

"build:dev": "webpack --env=dev --progress --profile --colors",
 "build:dist": "webpack --env=prod --progress --profile --colors"


通用配置:base.js
const webpack = require('webpack');
const glob = require('glob');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const All_Entry = require('./entrys.js');

const HtmlPlug = function(tit, name, arr) {
    return {
        title: tit,
        filename: name + '.html',
        template: './public/index.html',
        chunks: arr,
        chunksSortMode: "manual"
    }
}

module.exports = function() {
    return {
        entry: All_Entry,
        //  devtool: 'source-map',
        output: {
            path: path.resolve(__dirname, './build/'),
            filename: 'js/[name].[chunkhash:6].js'
        },
        //設(shè)置開發(fā)者工具的端口號,不設(shè)置則默認(rèn)為8080端口
        devServer: {
            inline: true,
            port: 8181
        },
        module: {
            rules: [{
                    test: /\.js?$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015', 'react']
                    }
                }, {
                    test: /\.(scss|sass|css)$/,
                    loader: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                },

            ]
        },
        plugins: [

            new ExtractTextPlugin("css/[name].[chunkhash:6].css"),
            new CleanWebpackPlugin(
                ['build'], {
                    root: __dirname,
                    verbose: true,
                    dry: false
                }
            ),

            new HtmlWebpackPlugin(HtmlPlug('登錄', 'login', ['routeconfig', 'commom', 'login'])),
            new HtmlWebpackPlugin(HtmlPlug('首頁', 'index', ['commom', 'index'])),
            new HtmlWebpackPlugin(HtmlPlug('注冊', 'resiger', ['commom', 'resiger'])),

            new HtmlWebpackPlugin(HtmlPlug('商品詳情', 'detail', ['commom', 'detail'])),

            new webpack.optimize.CommonsChunkPlugin({
                name: 'commom'
            }),

        ],
    }
};



**本地:dev.js**
const webpackMerge = require('webpack-merge');
const commonConfig = require('./base.js');

module.exports = function(env) {

        return webpackMerge(commonConfig(), {
                devtool: 'source-map',
            }

        }


**生產(chǎn):prod.js**
const webpackMerge = require('webpack-merge');
const commonConfig = require('./base.js');

module.exports = function(env) {
        return webpackMerge(commonConfig(), {
                plugins: [
                    new webpack.DefinePlugin({
                        'process.env': {
                            'NODE_ENV': JSON.stringify('prod')
                        }
                    }),
                    new webpack.optimize.UglifyJsPlugin({
                        beautify: false,
                        mangle: {
                            screw_ie8: true,
                            keep_fnames: true
                        },
                        compress: {
                            screw_ie8: true
                        },
                        comments: false
                    })
                ],
            }
        }
        
    
    **配置入口:webpack.config.js**
    function buildConfig(env) {
        console.log('----------------');
      return require('./config/' + env + '.js')({ env: env })
    }
    
    module.exports = buildConfig(env);
回答
編輯回答
練命

webpack.config.js 里面 buildConfig 傳入的參數(shù)改成 process.env.env

2017年10月30日 03:22
編輯回答
雅痞
    **配置入口:webpack.config.js**
    function buildConfig(env) {
        console.log('----------------');
      return require('./config/' + env + '.js')({ env: env })
    }
    
    module.exports = buildConfig(env);

webpack配置如是是一個(gè)函數(shù),函數(shù)的參數(shù)是webpack運(yùn)行時(shí)決定的,所以直接這樣改就可以

function buildConfig(env) {
      return require('./config/' + env + '.js')
    }
    
    module.exports = buildConfig;
2017年10月7日 03:11