1
Ich habe die komplexe Einrichtung von Webpack 2 und die damit verbundenen Vorteile gesehen. Einer der Gründe, die ich will, machen 2 Upgrade auf Version ist Webpack 2 nicht andere importieren, als wie dies Migrieren zu Webpack 2 für React-Anwendung
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
react-router für Paketdateigröße zu reduzieren helfen. Eine andere Sache zu prüfen ist, weil viele Beispiel im Internet gezeigt wird sie Webpack Umsetzung 2. Ich Hilfe suchen meine
webpack.config.js auf diese Version
require('dotenv').load();
var fs = require('fs');
var autoprefixer = require('autoprefixer');
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//debug: true,
devtool: 'cheap-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/App.js'
],
output: {
// pathinfo: true,
path: path.resolve(__dirname, 'public'),
filename: '[name].js',
chunkFilename: '[id].chunk.js',
publicPath: 'http://localhost:3000/'
},
plugins: [
new HtmlWebpackPlugin({
template: './index_template.ejs',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
}),
new webpack.HotModuleReplacementPlugin(),
// new webpack.optimize.CommonsChunkPlugin('shared.js'),
// new webpack.optimize.CommonsChunkPlugin('vendor', './public/js/vendor.js')
new webpack.DefinePlugin({
'process.env.ES_URL': JSON.stringify(process.env.ES_URL)
})
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loaders: ['react-hot', 'babel']
},
{
test: /\.styl$/,
exclude: /(node_modules|bower_components)/,
loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!postcss!stylus-loader'
},
{
test: /\.(png|jpg)$/,
exclude: /(node_modules|bower_components)/,
loader: 'url-loader?name=images/[name].[ext]&limit=8192'
},
{
test: /\.(ttf|otf|eot)$/,
exclude: /(node_modules|bower_components)/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=8192'
},
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
test: /\.scss$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?resolve url'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
loader: 'transform/cacheable?brfs'
},
{
test: /aws-sdk/,
loaders: ["transform?brfs"]
},
],
postLoaders: [{
include: /node_modules\/mapbox-gl-shaders/,
loader: 'transform',
query: 'brfs'
}]
},
resolve: {
root: path.join(__dirname, '..', 'app'),
alias: {
'react': path.join(__dirname, 'node_modules', 'react'),
'react-router': path.join(__dirname, 'node_modules', 'react-router'),
'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js'),
'webworkify': 'webworkify-webpack'
},
extensions: ['', '.js', '.jsx', '.json', '.css', '.styl', '.png', '.jpg', '.jpeg', '.gif']
},
postcss: function() {
return [autoprefixer];
}
};
und hier die Router-Setup zu aktualisieren, die versagt mir den Code zu tun Aufspalten
<Route path="/" component={Main}>
<IndexRoute getComponent={(nextState, cb) => {require.ensure([], require => {cb(null, Home)})}}/>
<Route path="s" getComponent={(nextState, cb) => {require.ensure([], require => {cb(null, Search)})}} /* onEnter={requireAuth} */ />
<Route path="login" getComponent={(nextState, cb) => {require.ensure([], require => {cb(null, LoginFrom)})}}/>
<Route path="signup" getComponent={(nextState, cb) => {require.ensure([], require => {cb(null, SignUpForm)})}}/>
</Route>
nach meiner Erfahrung ist es ziemlich geradlinig; Ich schlage vor, dass Sie beginnen, Änderungen vorzunehmen und eine Frage zu stellen, wenn Sie auf einen Fehler stolpern; dieses [blog] (https://medium.com/modus-create-front-end-development/webpack-2-tree-shaking-configuration-9f1de90f3233#.6m0zwcc6p) ist ein guter Ausgangspunkt – Deadfish
eine Sache sicher, Sie nicht mehr benötigt json-loader, webpack hat es eingebaut. und wird diesen loader verwenden, wenn er nicht weiß, welcher loader zu verwenden ist –