我如何防止Webpack捆绑.js文件 [英] How do i prevent a .js file being bundled by webpack

问题描述

我目前正在使用Webpack将我的项目文件捆绑到一个文件中.但是，我不希望webpack将我的config.js文件捆绑到所有我的配置已设置的位置.我希望在输出文件夹中保持独立，但不确定要实现这一目标.

Hi I am currently using webpack to bundle my project files into a single file. However, I do not want webpack to bundle my config.js file where all my config is set. I would like to this remain separate in the output folder but not sure out to achieve this.

我当前的设置是

//index.js file
#!/usr/bin/env node
'use strict';
let config = require('config.js);
let read = require('read.js);
console.log('i am running through command line');

//read.js file
'use strict'
console.log('read a text file');

//config.js 
'use strict';
module.exports = {
name: 'test'
}

//webpack.config.js
let webpack = require('webpack');
let path = require('path');
let fs = require('fs');

let nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
    return [ '.bin' ].indexOf(x) === -1;
})
.forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
});

module.exports = {
entry: [ 'babel-polyfill', './index.js' ],
target: 'node',
node: {
    __dirname: true
},
output: {
    path: path.join(__dirname, 'webpack_bundle'),
    filename: '[name].js',
    libraryTarget: 'commonjs'
},
module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'shebang-loader'
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: [ 'es2015' ]
            }
        } ]
},
resolve: {
    extensions: [ '.js' ]
},
plugins: [
    new webpack.BannerPlugin({banner: '#!/usr/bin/env node', raw: true 
})
]
,
    externals: nodeModules
};

注意:为简洁起见，我已大大简化了代码示例

Note: I have significantly simplified the code example for brevity

当前，当我运行webpack命令时，我得到一个包含index.js文件的文件夹webpack_bundle-index.js文件包含依赖项config.js和read.js.但是，我想将read.js依赖项捆绑到index.js文件中，但将config.js依赖项保留在单独的文件外部，这是捆绑的webpack输出所必需的.因此，在运行webpack命令后，文件夹webpack_bundle应该包含两个文件-index.js和config.js.我已经尝试通过将以下键值添加到外部对象config: './config.js'来修改外部，但这没有用.我还通过指定config.js作为入口点来创建了一个额外的入口点，但这也没有用.我不知道这一点，并且webpack文档还不清楚如何实现这一点.请帮忙！

Currently when i run the webpack command i get a folder webpack_bundle which contains an index.js file - the index.js file includes the dependencies config.js and read.js. However, what i would like is for the read.js dependency to be bundled into the index.js file but the config.js dependency to stay external in a separate file which gets required by the bundled webpack output. So the folder webpack_bundle should contain two files after running the webpack command - index.js and config.js. I have already tried to modify the externals by adding the following key value to the externals object config: './config.js' but this did not work. I also created an extra entrypoint by specifying config.js as the entrypoint but this also did not work. I can't figure this out and the webpack docs are not that clear on how to achieve this. Please help!

推荐答案

如果要将配置放在单独的捆绑软件中，则可以通过以下方式动态导入config.js文件来创建分割点: require.ensure :

If you want your config in a separate bundle, you can create a split point, by importing dynamically your config.js file with require.ensure:

require.ensure([], function() {
  let config = require('./config.js');
});

您的配置将放在单独的捆绑软件中.

Your config will then be in a separate bundle.

• 有关代码拆分的文档(警告:不推荐使用Webpack 1.x ).
• 有关代码拆分的文档(Webpack 2).

• Documentation about Code splitting (warning: Webpack 1.x is deprecated).
• Documentation about Code Splitting (Webpack 2).

如果您不希望Webpack捆绑您的配置文件，我想您可以使用 IgnorePlugin :

If you don't want your config file to be bundled by Webpack, I think you can use IgnorePlugin:

module.exports = {
  //...
  plugins: [new webpack.IgnorePlugin(/^\.\/config\.js$/)]
}

并使用 copy-webpack-plugin 复制您的config.js文件.

这篇关于我如何防止Webpack捆绑.js文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！