第一步，进入项目根目录下执行npm init ：生成package.json文件
第二步：npm install webpack –save-dev 给本项目安装webpack
第三部: npm install –save react react-dom babelify babel-preset-react
很优秀的一篇文章：
http://www.jianshu.com/p/42e11515c10f
webpack.config.js 配置文件收藏使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
module.exports = {
devtool: 'source-map',//配置生成Source Maps，选择合适的选项
entry: __dirname + "/app/main.js",//唯一入口文件，就像Java中的main方法
output: {//输出目录
path: __dirname + "/build",//打包后的js文件存放的地方
filename: "bundle.js"//打包后的js文件名
},
module: {//在配置文件里添加JSON loader
loaders: [
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules!postcss-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=25000'
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: function () {
return [ autoprefixer];
},
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
}),
new webpack.BannerPlugin("Copyright Flying Unicorns inc."),//在这个数组中new一个就可以了
new webpack.HotModuleReplacementPlugin()//热加载插件
],
devServer: {
port:"8080",
devtool:'evel',
progress:true,
contentBase: "./build",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
};
|
.babelrc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
|