小白搭建webpack+react+redux+es6（一）
2018-11-12 本文已影响202人
一支桨
代码仓库地址：webpack+react+redux+es6
注意点：
- 编辑器使用你自己喜欢的就好，本文采用的是轻量级的
VS Code - 仅供参考
开始
创建一个文件夹，此文名叫（webpack_learn）,并在文件夹中创建如下结构：
-css
-images
-js
-components
-redux
-index.js
-public
-icon.ico
index.html
- css ：存放所有的样式文件
- images ：存放所有的图片文件
- js ： 存放所有的代码文件
- components:存放的是UI文件
- redux存放的是行为文件
- index.js为入口文件
- public：存放公共文件，此处只放了启动界面index.html 和标签页的图标文件
开始配置
在此根目录下打开终端输入
npm init -y
此时会自动生成一个package.json文件，所有信息都可根需改动。打开文件可见
{
"name": "webpack_learn", //文件名字
"version": "1.0.0",
"description":"学习",
"main": "index.js", //入口文件
"scripts": { //后续的配置启动命令
"start": "webpack --mode development --config webpack.dev.config.js",
"build": "webpack --mode production --config webpack.dev.config.js"
},
"keywords": [],
"author": "", //作者信息
"license": "ISC"
}
由于配置文件不支持注释，请不要按照文中编写，只是文章展示
安装webpack和webpack-cli作为dev的依赖项
npm install webpack webpack-cli -save-dev
安装成功后，控制台输入npm start，此时的环境已经能对代码文件进行打包（webpack.dev.config.js 配置entry和output的情况下），但是远远不够我们运行，接下来配置react以及es6环境
安装 React和Babel
安装react和react-dom作为react依赖
npm install react react-dom --save
安装 babel-loader，@babel/core，@babel/preset-env，@babel/preset-react 作为 dev 依赖项
npm i -D babel-core babel-loader@7 babel-plugin-transform-runtime
npm i -D babel-preset-es2015 babel-preset-stage-0
npm i -S babel-runtime
- -D :-save-dev
- -S：--save
- babel-core：
- 把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，再通过语法转换器分析其语法后转为低版本 js。
- babel-preset-*
- babel-plugin-* 代表了一系列的转码插件
有了 babel-plugin 系列，可以按需配置自己想要的特性，若是想搭个 es6 环境，一个个地配置各个插件，我猜你会疯掉。babel-preset 系列就可以满足我们的需求，babel-preset 系列打包了一组插件，类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包处于 strawman 阶段的语法
- babel-plugin-* 代表了一系列的转码插件
- babel-runtime
- babel-runtime 在代码中中直接引入 helper 函数，意味着不能共享，造成最终打包出来的文件里有很多重复的 helper 代码。所以，babel 又开发了 babel-plugin-transform-runtime，这个模块会将我们的代码重写，如将 Promise 重写成 _Promise（只是打比方），然后引入_Promise helper 函数。这样就避免了重复打包代码和手动引入模块的痛苦。
在根目录下创建 webpack.dev.config.js 和 .babelrc 文件，并配置 babel-loader 及 babel 选项
// webpack.dev.config.js
const path = require("path")
module.exports={
//省略一万字
//....
module: {
rules: [
{
test: /\.jsx?$/, //正则表达式匹配，以此文件结尾的文件适用此转换规则
exclude: /node_modules/, //不包含文件夹
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
}
}
},
]
}
//......
//省略一万字
}
// .babelrc
{
"presets": [ "react","es2015","stage-0"], //一一对应
"plugins": []
}
编写/public/index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./icon.ico" >
<title>WebPack_learn</title>
</head>
<body>
<div id="root"></div>
<script src="../static/bundle.js"></script>
</body>
</html>
编写文件js/index.jsx如下：
import React from 'react';
import ReactDOM from 'react-dom';
const Index = () => {
return <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.getElementById('index'));
此时webpack+react+es6 的配置已基本完成，接下来配置webpack.dev.config.js文件
const path = require("path")
module.exports={
//新增的在此处
entry:{ //启动入口
bundle:"./js/index.jsx"
},
output:{ //输出文件
path:path.resolve(__dirname,'static'),
filename:"[name].js",
publicPath:'/static'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
}
}
},
]
},
//浏览器配置
devServer: {
port: 8888,
contentBase: './public',
inline: true,
openPage: '',
}
}
安装 webpack-dev-server 作为 dev 依赖项
npm i webpack-dev-server -D
更新package.json的scripts命令
"start": "webpack-dev-server --mode development --config webpack.dev.config.js --open",
执行 npm start,浏览器自动打开localhost:8080界面,你可以在界面上看到Hello React
