Webpack设置绕过使用Babel加载特定文件

Question

我有一个引导主题，该主题随JS和CSS文件一起提供，我想将其集成到我的react应用程序中。 我遇到了需要JS文件的问题，因为它们没有正确导出模块或正确定义变量（使用babel loader）。 我希望能够在我的应用程序中使用JS，但不能通过babel运行它们。 如果可能的话，我也希望能够对这些文件使用webpack的分块和缩小。

我该如何进行设置？

编辑

我很确定我需要参考babel的是exclude config参数。 不幸的是，无论我尝试使用什么配置，都无法实现。

      {
          test:   /\.js/,
          loaders: [ 'react-hot', 'babel' ],
          include: [
            path.join(__dirname, 'src', 'app')
          ],
          exclude: [
            path.join(__dirname, 'src', 'semantic-v1.1.2')
          ]
      },

这是我收到的错误：

ERROR in ./src/semantic-v1.1.2/assets/js/imagesloaded.pkgd.js
Module not found: Error: Cannot resolve module 'eventEmitter' in /Users/bradr/Dropbox (Personal)/Development/ritasfoods-com/src/semantic-v1.1.2/assets/js
 @ ./src/semantic-v1.1.2/assets/js/imagesloaded.pkgd.js 731:2-735:24

我确定我缺少一些简单的东西。

完整的webpack.config.js：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'eval',
    entry: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/app/index'
    ],
output: {
    path: path.join(__dirname, 'static'),
    filename: 'bundle.js',
    publicPath: '/static/'
},
module: {
  noParse: [
    /aws\-sdk/, // Hack to be able to import aws sdk.
  ],
  loaders: [
      {
          test:   /\.js/,
          loaders: [ 'react-hot', 'babel' ],
          include: path.join(__dirname, 'src/app'),
          exclude: path.resolve('src', 'semantic-v1.1.2')
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.md$/, loader: "html!markdown?gfm=false" },
      { test: /\.html/, loader: 'html' },
      { test: /\.yaml/, loader: 'json!yaml' }, 
      { test: /\.(woff|woff2)$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf$/,    loader: "file-loader" },
      { test: /\.eot$/,    loader: "file-loader" },
      { test: /\.svg$/,    loader: "file-loader" },
      { test: /\.(jpg|png)$/, loader: 'url' }
  ],
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
  resolve: {
    // Removes the need to specify file type in imports. 
    extensions: ['', '.js', '.json'],
    alias:{
      theme: path.resolve( __dirname, 'src', 'semantic-v1.1.2', 'assets')
    }
  }
};

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
}

package.json

{
  "name": "ritasfoods-com",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "node server.js",
    "build-prod": "./node_modules/webpack/bin/webpack.js -p --config webpack.config.prod.js --progress --colors",
    "deploy-prod": "ops/deploy-prod"
  },
  "repository": {
    "type": "git",
    "url": "..."
  },
  "author": "Brad Reynolds",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.6.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.6.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "html-loader": "^0.4.3",
    "node-sass": "^3.4.2",
    "react-hot-loader": "^1.3.0",
    "redux-devtools": "^3.2.0",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.0.11",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "aws-sdk": "^2.2.40",
    "babel-polyfill": "^6.8.0",
    "babel-preset-stage-0": "^6.5.0",
    "es6-promise": "^3.1.2",
    "events": "^1.1.0",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "imports-loader": "^0.6.5",
    "invariant": "^2.2.1",
    "jquery": "^2.2.1",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "markdown-loader": "^0.1.7",
    "mustache": "^2.2.1",
    "numeral": "^1.5.3",
    "pluralize": "^1.2.1",
    "react": "15.0.1",
    "react-dom": "15.0.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.0.0",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.0.1",
    "url-loader": "^0.5.7"
  }
}

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(8080, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:8080/');
});

Answer 1

我咬了子弹，并通过npm安装了bootstrap主题中的每个JS文件。 这是一个PITA，因为我必须通过webpack进行一些配置。 但这已经完成，所以我可以继续。

Answer 2

我是针对Chrome扩展程序的图片资源执行此操作的。 该应用程序本身不使用它们，但Chrome使用它们，因此我需要将它们复制到build文件夹中。

为静态文件创建一个额外的条目。 您的输入是一个仅需要所有静态文件的js文件。 您最终将获得无用的额外捆绑包作为副产品，但是所有文件将被复制到构建文件夹中。

首先，我将向您展示图像的示例，因为我有一些有效的代码可用于此示例。

webpackconfig.js

// ...
entry: {
  // ...
  'img': './img/index.js' 
},
output: {
  // dynamic bundle name for multiple outputs
  filename: '[name].js'
  // ...
},
rules: {
  // ...
  {
    test: /\.png|svg|jpg|gif$/,
    use: [
      { 
        // copy loaded files to 
        //  output_base_path/input_relative_path/filename.extension
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          useRelative: true
        }
      },
      { 
        loader: 'image-webpack-loader',
        options: { /* ... */ }
      }
    ]
  }
}

src / img / index.js

// This is the only line  in this file.
// Recursively require all png or jpg from current folder

require.context('./', true, /\.(png|jpg)$/)

---

因此，现在我将进行推测，并尝试尽可能地将其转换为您的用例，而无需对其进行测试：

webpackconfig.js

// ...
entry: {
  // ...
  'static': './static/index.js' 
},
output: {
  filename: '[name].js'
  // ...
},
rules: {
  // ...
  {
    // I'm guessing the string being tested here is a relative path.
    // If I'm wrong, this regex will need some tweaking.
    // Matches everything in assets folder
    test: /^assets\/.+/,
    use: [
      { 
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          useRelative: true
        }
      },
      { 
        // Not sure if you actually need this loader, but it's something I
        // would try if file loader is choking on your files, especially
        // if you are processing multiple filetypes.
        loader: 'raw-loader'
      }
    ]
  }
}

src / assets / index.js

// Let's just match everything. Putting images in this folder will
// probably give you headaches. Limit it to text files and handle images
// separately.

require.context('./', true, /.+/)

---

这是关于require.context和文件加载器的一些信息