webpack打包时如何抽离出项目配置文件单独打包

发布于 2017-05-06 02:15:15 字数 2166 浏览 1290 评论 1

在构建项目的时候 想单独打包配置文件,生产上可以自行改变配置文件
项目结构是这样的

|_node_modules/
|_src/
   |_components/
   |_containers/
   |_reducers/
   |_actions
   |_utils/
   |_index.js
   |_config.js

其中 index.js是项目入口,config.js是项目的配置文件

打包的时候 想将config.js单独抽离出来 打包成一个单独的文件
方便生产环境定制参数
我应该如何做

附上我的webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        vendor: ['react', 'react-dom', 'react-router','react-redux','./src/service']
    },
    output: {
        path: __dirname + '/build/',
        publicPath: './',
        filename: 'js/bundle.js',
        chunkFilename: 'js/[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'assets/[hash].[ext]'
                    }
                }]
            },
            {
                test: /.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    // devServer: {
    //     host: '0.0.0.0',
    //     hot: true,
    //     clientLogLevel: 'info',
    //     historyApiFallback: true,
    //     contentBase: './build/'
    // },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'js/vendor.js'
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            hash: true
        }),
        // new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        })
    ]
};

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

甜柠檬 2017-05-06 02:15:15

我也遇到过这种问题。

考虑到一些配置,能让任何人修改,而不需要进行编译。

我直接把配置文件挂到window上了,其他需要用配置的js文件默认读取window上的字段而已。

因为我想着如果用webpack打包,config就变成模块了,这样就必须进行打包后才能生效,所以目前还没想到好方法。

也想听听各位老师方案。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文