用webpack搭建react应用环境,就写了几行代码,为什么生成出来的js文件大小为1.3M?是我的配置有问题吗
下面是我的配置
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
module.exports = {
//页面入口文件配置
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:3000',
path.resolve(__dirname, 'src/app.jsx')
],
//入口文件输出配置
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
{
test: /\.jsx?$/,
exclude: [node_modules_dir],
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015','react']
}
},
{
test: /\.css/,
loader: 'style!css'
}
],
},
//其它解决方案配置
resolve: {
extensions: ['', '.js', '.jsx', '.json']
},
plugins: [new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})]
};
下面是我的app.jsx文件代码
import React from 'react'
import ReactDOM from 'react-dom';
import 'antd/lib/index.css';
import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span="12">.col-12</Col>
<Col span="12">.col-12</Col>
</Row>
<Row className="testRowClassName">
<Col span="8">.col-8</Col>
<Col span="8">.col-8</Col>
<Col span="8" className="testColClassName">.col-8</Col>
</Row>
<Row>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
</Row>
</div>,
document.getElementById('app')
);
个人感觉react加载了两遍,因为antd这个UI库也要加载react。请问大神们是这有原因吗?
推荐看看这个,很不错
http://fakefish.github.io/react-webpack-...
exclude: [node_modules_dir]这个文件夹写的对么?node组件文件夹貌似没有dir呀
确实有可能 React 加载了两遍,一些基本的框架库,会被多次引用到的,需要使用 CommonsChunkPlugin 进行代码优化,否则的话就会造成多次加载,webpack 的官方实例是这样的:
var webpack = require("webpack");
module.exports = {
entry: {
app: "./app.js",
vendor: ["jquery", "underscore", ...],
},
output: {
filename: "bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
]
};
更具体的可以参见 https://webpack.github.io/docs/code-spli...
非两遍,react本身就很大。压缩一下就小很多了。
官方的优化API文件里几乎没有,建议去看文档