1. 下载 Node.js
官网：https://nodejs.org/en/download/
2. 安装 webpack
在你的项目文件夹启动 cmd（shell），输入：
npm init
配置好 package.json，然后输入：
npm install --save webpack
创建文件与文件夹：
image
3. 配置 webpack
在项目文件夹下创建webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
配置 package.json
{
"name":"webpack-sample-project",
"version":"1.0.0",
"description":"Sample webpack project",
"scripts": {
"start":"webpack"// 修改的是这里，JSON文件不支持注释，引用时请清除
}
}
4. 使用 webpack 启动服务器
安装依赖：
npm install --save-dev webpack-dev-server
把命令加到 webpack 的配置文件中，现在的配置文件 webpack.config.js 如下所示：
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
作者：zhangwang 链接：https://www.jianshu.com/p/42e11515c10f 來源：简书
在 package.json 中的 scripts 对象中添加如下命令，用以开启本地服务器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
5. 安装与配置 Babel
我们先来一次性安装这些依赖包
npm install --save babel-core babel-loader babel-preset-env babel-preset-react
Loaders
Loaders 需要单独安装并且需要在webpack.config.js中的 modules 关键字下进行配置，Loaders 的配置包括以下几方面：
-
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须） -
loader：loader的名称（必须） -
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）； -
query：为loaders提供额外的设置选项（可选）
作者：zhangwang 链接：https://www.jianshu.com/p/42e11515c10f 來源：简书
在 webpack.config.js 中配置Babel的方法如下:
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
};
6. 安装 React
npm install --save react react-dom
接下来我们在 app 文件夹下，新建 config.json 文件：
{
"greetText": "Hi there and greetings from JSON!"
}
我们使用 ES6 的语法，写 Greeter.js 并返回一个 React 组件：
//Greeter,js
import React, {Component} from 'react'
import config from './config.json';
class Greeter extends Component{
render() {
return (
<div>
{config.greetText}
</div>
);
}
}
export default Greeter
main.js 如下，使用 ES6 的模块定义和渲染 Greeter 模块
// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
render(<Greeter />, document.getElementById('root'));
index.html 如下：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
重新使用 npm start 打包，如果之前打开的本地服务器没有关闭，你应该可以在 localhost:8080 下看到以下的内容，这说明 react 和 es6 被正常打包了。
image
Babel其实可以完全在 webpack.config.js 中进行配置，现在我们就提取出相关部分，分两个配置文件进行配置
移除 webpack.config.js 里的 options：
options: {
presets: [
"env", "react"
]
}
新建 .babelrc:
//.babelrc
{
"presets": ["react", "env"]
}
作者：zhangwang 链接：https://www.jianshu.com/p/42e11515c10f 來源：简书
网友评论