防止文件在Webpack中串联

时间:2018-08-01 17:05:45

标签: javascript angularjs npm webpack webpack-2

我有一个AngularJS(v1.6)+ Webpack(2.7.0)Web应用程序,它使用的是独立文件( config.js )中包含的constant,例如接下来的一个:

  

config.js

let DEVOPS_SETTINGS = {
  API_PROXY_URL: 'http://localhost:3011',
  RAILS_API_URL: 'http://localhost:3010'
};

module.exports = DEVOPS_SETTINGS;
  

index.js

中的某个位置
//config.js
  .constant('DEVOPS_SETTINGS', DEVOPS_SETTINGS)

项目本身的结构如下

|___node_modules
|___src
    |___app (folder)
    |___index.js
    |___config.js

构建过程将src文件夹中的每个文件连接起来,并为每个输出分配一个哈希。

  

问题

我试图将 config.js 排除在连接和散列之外,例如:

dist
|___app-123456789.js <-- does not contain a DEVOPS_SETTINGS constant
|___config.js
|___polyfills-123456789.js
|___vendors-123456789.js

但是我一直得到这个

dist
|___app-123456789.js <-- contains a DEVOPS_SETTINGS constant
|___config.js
|___polyfills-123456789.js
|___vendors-123456789.js

因此,我已经 constant声明了两次。 到目前为止,我已经能够使用this technique摆脱哈希,但是配置仍然可以在app.js内部串联。 我尝试使用noParse和各种排除方法,但没有结果,请您能帮我吗?

这是我的module.exports中的webpack.conf.js

  

webpack.conf.js

module.exports = [
  {//config.js
    plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      FailPlugin,
      new webpack.optimize.CommonsChunkPlugin({
        name: 'config',
        minChunks: Infinity
      }),
    ],
    output: {
      path: path.join(process.cwd(), conf.paths.dist),
      filename: '[name].js',
      chunkFilename: '[name]-[hash].js'
    },
    entry: {
      config: `./${conf.path.src('config')}`
    }
  },
  {
    module: {
      noParse: /src\/config\.js$/,
      loaders: [
        {
          test: /\.json$/,
          loaders: [
            'json-loader'
          ]
        },
        {
          test: /\.js$/,
          exclude: [
            /node_modules/,
            /src\/config\.js$/
            // `./${conf.path.src('config')}` <- this is not working either
          ],
          loaders: [
            'ng-annotate-loader',
            'eslint-loader'
          ],
          enforce: 'pre'
        },
        {
          test: /\.(css|less)$/,
          exclude: '/node_modules/roboto-fontface/',
          loaders: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader?minimize!less-loader!postcss-loader'
          })
        },
        {
          test: /\.html$/,
          loaders: [
            'html-loader'
          ]
        },
        {
          test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/,
          loader: 'file-loader?name=[name].[ext]'
        }
      ]
    },
    plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      FailPlugin,
      new HtmlWebpackPlugin({
        template: conf.path.src('index.html'),
        inject: true
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendors',
        minChunks: Infinity
      }),
      new ExtractTextPlugin('index-[contenthash].css'),
      new webpack.LoaderOptionsPlugin({
        options: {
          postcss: () => [autoprefixer]
        }
      })
    ],
    output: {
      path: path.join(process.cwd(), conf.paths.dist),
      filename: '[name]-[hash].js',
      chunkFilename: '[name]-[hash].js'
    },
    entry: {
      app: `./${conf.path.src('index')}`,
      vendors: Object.keys(pkg.dependencies).concat(['webpack-material-design-icons']),
      polyfills: [
        'es6-shim'
      ]
    }
  }
];

0 个答案:

没有答案