第一个构建的工程中使用的webpack还是1.x版本的
昨天新建个工程打算学习下g2的数据可视化开发：
npm install --save-dev webpack
安装的webpack都已经是最新的3.3.0版本，不得不说学习的速度永远赶不上技术更新的速度啊。
既然webpack已经下了最新版，那我就把react、babel等都安装了最新版等包，动手前确保你的node，npm版本是否支持最新的这些包，我的node 6.10.0， npm 3.10.10够跑了，给个参考，构建过程中还是踩过不少坑的。
先看下工程目录结构：
|-build //生产环境的打包文件
|-dev //开发环境的打包文件
|-node-modules
|-src
|-app.js //打包的主js
|-router.js //工程路由配置
|-.babelrc
|-.gitignore
|-package.json
|-README.md
|-webpack.config.js //webapck开发环境配置
|-webpack.pro.config.js //webapck生产环境配置
接下来讲解搭建步骤：
- 首先看下package.json：
{
"name": "g2-demo",
"version": "0.0.1",
"description": "",
"dependencies": {
"babel-runtime": "^6.23.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.3.0",
"webpack-dev-server": "^1.16.5"
},
"scripts": {
"start": "webpack-dev-server --devtool eval --progress --colors --hot --inline --content-base dev",
"build": "webpack --progress --profile --colors --config webpack.pro.config.js"
},
"author": "mia yu",
"license": "ISC"
}
- 配置开发环境webpack.config.js：
var webpack = require('webpack');
var path = require('path');
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
entry : {
main : path.resolve(__dirname,'./src/app.js'),
},
output:{
path: path.resolve(__dirname,'./dev'),
filename: 'bundle.js'
},
module: {
rules: [
{test: /\.less/, use: ['style','css','less']},
{ test: /\.css$/, use: ['style','css'] },
{ test: /\.(png|jpg|jpeg)$/, use: ['url']},
{test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
}
}
}
]
},
resolve: {
extensions: [ '.js', '.json', '.scss','.less','jsonp'],
},
devServer:{
inline:true,
port:3000,
// host:'192.168.199.237'
}
};
因为webpack更新后API的变化，所以有些配置的语法也要变化：比如loaders更名为rules，多个loader可以用use字段以数组的形式表示, entry需要申明为对象类型, resolve.extensions里的配置避免''（空串），会报错～等等。
- babel的配置值得注意一下，在.babelrc文件中，需要将配置改为：
{
"presets": [
"react",
[ "es2015", { "modules": false } ]
]
}
4.生产环境配置webpack.pro.config.js
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({minimize:true}),
// new webpack.optimize.CommonsChunkPlugin('common'),
new HtmlWebpackPlugin({
title:"g2-demo",
filename:'index.html',
template:'./src/index.html' , //Load a custom template
// chunks:['common.js']
}),
new webpack.DefinePlugin({
"process.env":{
NODE_ENV:JSON.stringify('production')
}
})
],
entry:{
app:path.resolve(__dirname,'./src/app.js'),
// common:['react', 'g2']
},
output:{
path: path.resolve(__dirname,'./build'),
filename: 'bundle.js'
//filename: '[name].js'
},
module: {
rules: [
{test: /\.less/, use: ['style','css','less']},
{ test: /\.css$/, use: ['style','css'] },
{ test: /\.(png|jpg|jpeg)$/, use: ['url']},
{test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
}
}
}
]
},
resolve: {
extensions: ['.js', '.json', '.scss','.less','jsonp']
}
};
我配置的是把所有的js都打包成一个文件：bundle.js，如果需要把三方包的js抽出来，可以在entry里配置common，在plugin里声明一个：
new webpack.optimize.CommonsChunkPlugin('common'),
注意一下：新版本的webpack中，CommonsChunkPlugin插件里提示仅支持一位参数
然后将output里filename写成[name].js即可
这样基于webpack3.3.0的react工程就搭建好了
[源码链接]：https://github.com/yomonah/g2-demo
