- 项目创建
创建一个文件夹，进入到该目录，执行npm init。所有的提示内容均可以跳过，执行完之后，目录中会多一个package.json文件，该文件为核心文件，包含包依赖管理和脚本任务。
mkdir webpack-demo
cd webpack-demo
npm init
- 安装react，react-dom,webpack
--save的含义是项目上线运行所需要的包(生产环境)
--save-dev是开发环境所需要的包
npm install react react-dom --save
npm install webpack@3.8.1 --save-dev -g
(配置3.0+的webpack，全局安装webpack)
- 项目目录
目录.png
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="bundle.js"></script>
</body>
</html>
- index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
render(
<div>Hello React!</div>,
document.getElementById('app')
);
- webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
output: {
path: path.resolve(__dirname, './dist'), // 输出的路径
filename: 'bundle.js' // 打包后文件
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
}
},
exclude: /node_modules/
}
]
}
}
- 执行打包
1. webpack --config webpack.config.js
执行打包之后会报出如图(缺少依赖.png)错误。
因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码。
2. npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
3. 再次执行webpack --config webpack.config.js
会报出如图(版本错误.png)错误，babel-core和babel-loader版本对不上
缺少依赖.png
版本错误.png
- 简单的优化
1. index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render((<App />), document.getElementById('app'));
2. 新建.babelrc文件，提取babel配置
{
"presets": [
"es2015",
"react"
]
}
3. 修改webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
4. 在src下新建App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>Hello React!</div>
);
}
}
export default App;
- 以脚本的方式构建
修改package.json，加入自定义脚本，在项目根目录执行npm run dev即可达到上面一样的效果。
"scripts": {
"dev": "webpack --config webpack.config.js"
}
- 搭建前端服务器
webpack-dev-server是一个小型的静态文件服务器，为webpack打包的资源文件提供Web服务。
1. 在src下面新建文件webpackDevServer.config.js
'use strict'
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
contentBase: path.resolve(__dirname, './dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹
historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
port: 3000, //如果省略，默认8080
publicPath: "/"
});
server.listen(3000, 'localhost', function (err) {
if (err) throw err
})
2. 更新package.json
"scripts": {
"dev": "node webpackDevServer.config"
}
！！！注意webpack-dev-server的版本问题，不然会报出如下错误。
webpack-dev-server版本问题.png
到此已经使用webpack搭建好简单的React开发环境。🏃🏃🏃
