第一個構(gòu)建的工程中使用的webpack還是1.x版本的
昨天新建個工程打算學(xué)習(xí)下g2的數(shù)據(jù)可視化開發(fā)：
npm install --save-dev webpack
安裝的webpack都已經(jīng)是最新的3.3.0版本，不得不說學(xué)習(xí)的速度永遠(yuǎn)趕不上技術(shù)更新的速度啊檀咙。
既然webpack已經(jīng)下了最新版浪规，那我就把react缴渊、babel等都安裝了最新版等包组橄，動手前確保你的node率拒，npm版本是否支持最新的這些包贸弥，我的node 6.10.0瓢省， npm 3.10.10夠跑了弄息，給個參考，構(gòu)建過程中還是踩過不少坑的勤婚。
先看下工程目錄結(jié)構(gòu)：
|-build //生產(chǎn)環(huán)境的打包文件
|-dev //開發(fā)環(huán)境的打包文件
|-node-modules
|-src
|-app.js //打包的主js
|-router.js //工程路由配置
|-.babelrc
|-.gitignore
|-package.json
|-README.md
|-webpack.config.js //webapck開發(fā)環(huán)境配置
|-webpack.pro.config.js //webapck生產(chǎn)環(huán)境配置
接下來講解搭建步驟：
- 首先看下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"
}
- 配置開發(fā)環(huán)境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字段以數(shù)組的形式表示, entry需要申明為對象類型, resolve.extensions里的配置避免''（空串）馒胆，會報錯～等等缨称。
- babel的配置值得注意一下，在.babelrc文件中祝迂，需要將配置改為：
{
"presets": [
"react",
[ "es2015", { "modules": false } ]
]
}
4.生產(chǎn)環(huán)境配置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插件里提示僅支持一位參數(shù)
然后將output里filename寫成[name].js即可
這樣基于webpack3.3.0的react工程就搭建好了
[源碼鏈接]：https://github.com/yomonah/g2-demo
