【发布时间】：2016-12-17 15:09:49
【问题描述】：
我已经看到了 webpack 2 的复杂设置以及它带来的好处。让我想升级到版本 2 的原因之一是 Webpack 2 不会像这样指定以外的导入
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
所以我认为这将帮助我减小包 react-router 的文件大小。另一件需要考虑的事情是因为互联网上显示的许多示例都是他们实现 Webpack 2。我寻求帮助将我的 webpack.config.js 升级到这个版本
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];
}
};
这里是我无法进行代码拆分的路由器设置
<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>
【问题讨论】：
-
根据我的经验，这是相当直接的；我建议您在偶然发现错误时开始进行更改并发布问题；这个blog 是一个很好的起点
-
可以肯定的是，你不再需要 json-loader，webpack 已经内置了它。当它不知道要使用什么加载器时，它会使用该加载器
标签： webpack react-router