新建一个webpack的项目
npm i -s webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
webpack和webpack-dev-server分别是webpack打包工具和一个开发服务器
babel是一个js编译器（js也有编译器了...）
babel-loader用于加载我们的各类资源；
babel-preset-es2015让我们可以在项目中使用es2015；
babel-preset-react负责把react中的jsx代码转换为createElement的调用；
babel-preset-stage-0是ES7不同阶段语法提案的转码规则中的一个。
创建webpack.config.js文件
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/app.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "app.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
entry是前端build的入口文件，context可以被require的路径，output为输出路径和文件名。我们用debug变量来区分开发环境和生产环境。在生产环境中，我们要压缩我们的输出文件。下面我们创建src/js/app.js
// app.js
const test = () => {console.log("hello")}
test()
分别尝试以下命令
webpack
NODE_ENV=production webpack
react
npm i -s react react-dom
下面我们创建一个最简单的app
<body>
<div id="app"></div>
<script src="app.min.js"></script>
</body>
创建我们的第一个组件
import React from 'react'
export default class Layout extends React.Component{
render(){
return (
<h1>Hello webpack</h1>
)
}
}
使用组件
import React from "react"
import ReactDOM from "react-dom"
import App from "./Components/Layout"
const app = document.getElementById('app')
ReactDOM.render(<Layout/>, app);
编译并查看结果
webpack
open src/index.html
配置webpack-dev-server
我们可以使用npm scripts，在package.json的scripts中加入下面代码。
"dev": "webpack-dev-server --port 9000 --inline --content-base src",
运行
npm run dev
打开localhost:9000,可以看到结果，尝试修改Layout.js，浏览器立即发生变化。
import css
npm install style-loader css-loader --save-dev
然后创建文件src/css/main.css
h2 {
color: red;
}
在webpack的配置文件中，我们加入css文件的loader
{ test: /\.css$/, loaders: ['style', 'css'] }
重启npm run dev。下面可以修改app.js，在其中引入css文件
import '../css/main.css'
too easy!
import Image/url
插入图片现在也变得超级酷了
npm i -s file-loader url-loader
修改webpack.config.js并重启
{ test: /\.png$/, loader: "file-loader?mimetype=image/png" }
修改Layout.js
import React from 'react'
import url from '../../images/pic.png'
export default class Layout extends React.Component{
render(){
return(
<div>
<h2>Hello webpack again</h2>
<img src={url}/>
</div>
)
}
}
插件
npm i -s babel-plugin-react-html-attrs babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy
react-html-attrs复制在编译js的时候，把class转成className，把for转成htmlFor
transform-class-properties用于转换class
transform-decorators-legacy 负责兼容babel5和babel6
把这三个插件插入js的loader中
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{ test: /\.css$/, loaders: ['style', 'css'] },
{ test: /\.png$/, loader: "file-loader?mimetype=image/png" }
]
