特定のファイルをロードするのをバイパスでバイパスするWebpackの設定

Question

JSとCSSファイルに付属しているブートストラップのテーマが、私のリアクションアプリに統合したいと思っています。私はJSファイルを必要とする問題に取り組んでいます。なぜならモジュールを適切にエクスポートしたり、変数を適切に定義したりしないからです（バベルローダーを使用して）。私はアプリケーションでJSを要求することができますが、バーベルを介してそれらを実行しないようにしたいと思います。私は、可能であれば、webpackのchunkingとminificationをこれらのファイルに使用したいと思っています。

これを設定するにはどうすればよいですか？私はバベルを参考に必要なものをかなり確信している

編集exclude configパラメータです。残念ながら、除外設定を試しても無視されます。

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 

私は、単純な何かが欠けてると確信している：

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

は、ここで私は受信エラーです。

全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経由でブートストラップのテーマからすべてのJSファイルをインストールしました。私がwebpackでいくつか設定しなければならなかったのは、PITAでした。しかし、それは私が上に移動することができます完了です。

Answer 2

クロムエクステンションの画像アセットでこれを行います。アプリケーション自体はそれらを使用しませんが、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)$/) 

---

だから今、私は投機取得し、最高としてあなたのユースケースにそれを翻訳してみましょう私はそれをテストすることができなくてもいいです：

webpackconfigJS

// ... 
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