Question

Webpack正在解析我不想要的文件，以及我没有导入的文件。因此，它会抛出有关这些文件中无效导入的错误 - 在构建过程中我不希望这些错误。

例如，从我最新的版本：

ERROR in ./src/app.e2e.ts
(1,23): error TS2307: Cannot find module 'protractor'.

但是，文件不会导入到任何位置，如分析所示。它是预取的，但我没有配置任何预取插件。

Webpack配置：

webpack.dev.js：

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/static/',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
  },

  htmlLoader: {
    minimize: false // workaround for ng2
  },

  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),

    new ManifestRevisionPlugin(helpers.root('dist', 'manifest.json'), {
      rootAssetPath: 'src'
    })
  ]
});

webpack.common.js：

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader'],
      },
      {
        test: /\.html$/,
        exclude: helpers.root('src', 'partials'),
        loader: 'html'
      },
      {
        test: /\.html$/,
        include: helpers.root('src', 'partials'),
        loader: 'ngtemplate?relativeTo=' + helpers.root('src') + '&prefix=static!html'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw' // for angular2-template-loader
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      }
    ]
  },

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      _: "underscore",
      io: "socket.io-client"
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new webpack.DefinePlugin({
      'RADREPORT_VERSION': JSON.stringify(helpers.loadFile('VERSION.txt'))
    })
  ]
};

Answer 1

与ManifestRevisionPlugin和rootAssetPath。

有关

它需要rootAssetPath，因为我在内部使用它来走它   检测entry下目前未列出的资产的路径   webpack config的一部分。

你可能会说1个javascript条目文件和一些样式表   （您的主要应用程序，一些供应商表等）。这很好，花花公子但是   如果你有40张图片怎么办？拥有是不合理的   保留一个图像列表，但没有在那里列出   webpack真的不知道如何处理这些文件。

为了克服这一点，我走了根路径并忽略了任何内容   ignorePaths。对于它找到的每个文件，它在内部调用   文件路径上的webpack.PrefetchPlugin。这让我们可以标记文件   使用md5或您在webpack配置中选择的任何内容（外部   这个插件的范围）让它发出文件。

https://github.com/nickjj/manifest-revision-webpack-plugin/issues/2#issuecomment-108029177

Webpack构建未导入的文件

1 个答案: