webpack搭建React环境记录

webpack 安装 && 配置

安装webpack

  • 全局安装
    npm install -g webpack
    npm install -g webpack-dev-server

  • 创建项目文目录 & 初始化
    mkdir webpack-demo
    cd webapck-demo
    npm init -y #生成 package.json文件

  • 本地安装 webpack
    npm install --save webpack
    npm install --save webpack-dev-server

装包 支持ES6 react

npm install --save babel-loader babel-core babel-preset-es2015
npm install --save react react-dom babel-preset-react

基本配置

webpack.config.js :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var webpack = require('webpack');
var path = require('path');

module.exports = {
context: __dirname + '/src',
entry: "./index.js",
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}]
},
output: {
path: __dirname + "/src/",
filename: "bundle.js"
}
};

PS:简单记录,仅供参考 ლ(❛◡❛✿)ლ

-------------本文结束感谢您的阅读-------------
帮助别人,快乐自己,打赏随意!