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

时间：2016-05-26 22:58:44

标签： reactjs webpack babel

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

我该如何设置呢？

修改

我很确定我在引用babel时需要的是exclude配置参数。不幸的是，无论我尝试什么，排除配置都不受尊重。

      {
          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/');
});

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

我为Chrome扩展程序的图像资源执行此操作。该应用程序本身不使用它们，但Chrome确实如此，因此我需要将它们复制到构建文件夹中。

为静态文件创建一个额外的条目。您的条目是一个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 /资产/ 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和file-loader

的一些信息
相关问题
最新问题