- 创建webpack.json文件
注意：不能存在中文路径
$ npm init
- 安装react相关库
$ npm install react react-dom --save
- 安装bable相关库
注意：babel-core@6 对应babel-loader@7，7对应8否则运行报错
$ npm install babel-core babel-preset-es2015 babel-preset-react babel-loader@7 --save-dev
- 安装webpack相关库
$ npm install webpack -g $ npm install webpack-dev-server -g
- 安装css下载器相关库
$ cnpm install style-loader css-loader --save-dev- src下创建css文件夹，新建css文件
body{ background : red }
- webpack的配置文件webpack.config.js
const path = require('path'); //path内置的模块，用来设置路径。 module.exports = { entry: './src/js/main.js', // 入口文件路径 output: { // 输出配置 filename: 'bundle.js', // 输出文件名 path: path.resolve(__dirname, 'dist') //输出文件路径配置 }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, //babel处理js { test: /\.js$/, exclude: /node_modules/, //排除此文件夹 use: [ 'babel-loader' ] } ] }, devServer:{ contentBase: './'} ,//热部署配置，两个必要条件，根目录寻找，必须index文件 };
- babel配置文件.babelrc
{ "presets": ["es2015", "react"] }
- 编码结构
根目录下建src,src下建js,js里必要的main.js主文件入口
-
src/js/App.js: 应用组件
import React from "react" class App extends React.Component{ render(){ return <h1>sdfd</h1> } } // 暴露组件，方便引用 export default App -
src/js/main.js: 入口js
import React from "react" import ReactDOM from "react-dom" import App from "./App" import "../css/test.css" ReactDOM.render(<App />, document.getElementById("wrap")); -
根目录下新建index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="wrap"> </div> <script src="dist/bundle.js"></script> </body> </html>
- 启动命令
$ webpack // 打包模块
$ webpack-dev-server // 热加载
- 如果不想记启动命令
- webpack.json中配置
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
}
- 启动方式
$ npm run start/build
