先简单说一下webpack使用的基本步揍:
首先使用npm下载webpack
npm install webpack -g //全局安装
npm install webpack --save-dev //本地安装
官方推荐本地安装、项目依赖比较清晰
安装react相关模块
npm install react --save-dev
npm install react-dom --save-dev
安装并配置babel相关模块,使其能够正确解析es6
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-react babel-preset-es2015 --save-dev
//以下四个阶段插件版本选择一个安装都可以可以支持es7
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
写配置文件:在项目根目录下新建一个名为package.config.js的文件
module.exports = {
entry: [
'./assets/js/ManageSystem.js'
],
output: {
path: __dirname + '/assets/',
publicPath: "/assets/",
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js|jsx$/,
loaders: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}
};
安装webpack开发服务器
npm install webpack-dev-server -g
使用以下命令编译文件,即无需每次修改都使用webpack命令编译
webpack-dev-server --progress --colors
问题一:报错react.render is not a function
原因:react API更新后 React 、ReactDom成为两个独立的package,应使用ReactDom中的render方法
import React from 'react';
React.render(<App />, document.getElementById('app'));
改为:
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(<App />, document.getElementById('app'));
问题二:报错非法使用import声明
原因:使用babel解析es6失败,babel-preset-es2015没有安装,配置文件中依赖错误