转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：https://blog.csdn.net/pcaxb/article/details/82014500
React+Webpack4.0+ES6+Antd最新版环境搭建详解-2018年
目录
React+Webpack4.0+ES6+Antd最新版环境搭建详解-2018年
2.安装完Node之后,测试Node安装是否成功，终端执行node -v查看
3.安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下:
1.安装完nodejs之后,打开终端,全局安装webpack，执行命令:
3.创建React + webpack + ES6项目 + 配置
React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
webpack的模块化，react的组件化，以及es2015的各种新特性都很吸引人，网上也有很多入门的资料,但是很多都是偏概念的,本文将结合实际开发来搭建整个环境。下面我们进入正题:
1.NodeJs 安装和配置
1.从官网下载最新版本的node.js安装
官网下载地址:
官网需要翻墙,如果没有翻墙的同学可以到nodejs中文网下载,下载地址:
如果你需要使用Mac Homebrew安装nodejs,请参考我的另一篇博客:
http://blog.csdn.net/pcaxb/article/details/52046438
2.安装完Node之后,测试Node安装是否成功，终端执行node -v查看
命令
node -v
如果提示 v8.11.4 类似的版本信息就是安装成功
如果提示'node' 不是内部或外部命令，也不是可运行的程序
或批处理文件。3.安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下:
（1）npm config set registry "http://registry.npm.taobao.org"
（2）npm config list 可以查看配置用cnpm比npm的淘宝镜像要快
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.WebPack全局安装 和 NPM查询全局安装包
1.安装完nodejs之后,打开终端,全局安装webpack，执行命令:
命令
npm install webpack webpack-cli webpack-dev-server -g-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装
webpack 核心包
webpack-cli 如果你使用 webpack 4+ 版本，你还需要安装 CLI
webpack-dev-server
webpack-dev-server 达到浏览器自动刷新的效果
2.NPM全局安装包查询
命令
npm list -g --depth 0
查询结果
+-- webpack@4.16.5
+-- webpack-cli@3.1.0
`-- webpack-dev-server@3.1.53.创建React + webpack + ES6项目 + 配置
1.创建一个目录，目录名为react-webpack
执行命令:(也可以不使用命令，自己通过平常创建文件夹的方式直接创建)
切换到需要放项目的文件夹下
cd 路径
创建目录
mkdir react-webpack
切换到该目录下
cd react-webpack/ 如果是通过平常创建文件夹的方式直接创建，那就是cd 最终的路径
2.创建package.json 文件
使用 npm init 初始化，生成 package.json 文件：执行命令:
自定义创建package.json ，自己输入
npm init
或者 创建默认的package.json
npm init -yes 3.添加开发依赖包及插件 devDependencies
安装命令
这里是一条命令 安装的东西比较多，比较长
npm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0 clean-webpack-plugin css-loader file-loader html-webpack-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
安装完成图，有一些警告没有关系，没有错误就行
--save是保存这些依赖的版本到package.json
-dev是 安装到package.json的devDependencies属性中
babel-core 如果某些代码需要调用 Babel 的 API 进行转码，就要使用babel-core模块。
babel-loader es6转码
babel-preset-latest es6最新转码规则
babel-plugin-import antd按需加载样式
babel-preset-react react 转码规则
babel-preset-stage-0 e67转码
css-loader css模块加载
file-loader file模块加载 比如图片就需要这个file加载
node-sass scss模块加载
sass-loader scss模块加载
style-loader css模块加载
url-loader 图片url模块加载
webpack webpack核心包
webpack-cli 如果你使用 webpack 4+ 版本，你还需要安装 CLI
webpack-dev-server 达到浏览器自动刷新的效果
clean-webpack-plugin webpack可以配置清空某个文件夹
html-webpack-plugin html默认模板导入插件
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。
4.添加产品依赖包及插件 dependencies
安装命令
这里是一条命令 安装的东西比较多，比较长
npm install --save antd-mobile echarts es6-promise react react-dom react-router-dom react-sublime-video
安装完成图，有一些警告没有关系，没有错误就行
antd-mobile 蚂蚁金服手机端antd
echarts echarts 图表
es6-promise es6的promise
react react核心包
react-dom react核心包
react-router-dom react路由
react-sublime-video 视频播放插件
5.webpack 配置
新建开发环境development和生产环境production的webpack配置文件
最终webpack.development.config.js 文件如下
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode:'development',
entry: {
bundle: path.resolve(__dirname, './src/main.js'),
//添加要打包在vendor里面的库
vendors: ['react','react-dom','react-router'],
},
output: {
path: path.resolve(__dirname, './build'),
filename: '[name].js'
},
devServer: {
host: '0.0.0.0',
port: 8080
},
module: {
rules: [
{
test: /\.js|jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
},
{ //使用css配置
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
//使用less配置
test: /\.less$/,
loader: "style-loader!css-loader"
},
// {
// test: /\.(png|jpg|gif)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// //编译出来是项目中对应图片文件夹的文件目录
// // name: 'images/[path][name].[ext]'
// name: 'images/[hash].[ext]',//所有图片在一个目录
// }
// }
// ]
// }
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[hash].[ext]',//所有图片在一个目录
}
}
]
}
]
},
performance: {
hints: false
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
// devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({//设置成production去除警告
'process.env':{
NODE_ENV: JSON.stringify("production")
}
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './common.html',
inject: 'body'
}),
new CleanWebpackPlugin(['dist',
'build'], {
root:__dirname,
verbose: true,
dry: false,
exclude: ['jslibs']
})
]
};最终webpack.production.config.js 文件如下
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode:'production',
entry: {
bundle: path.resolve(__dirname, './src/main.js'),
//添加要打包在vendor里面的库
//vendors: ['react','react-dom','react-router'],
},
output: {
path: path.resolve(__dirname, './build'),
filename: '[name][hash].js'
},
module: {
rules: [
{
test: /\.js|jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
},
{ //使用css配置
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
//使用less配置
test: /\.less$/,
loader: "style-loader!css-loader"
},
// {
// test: /\.(png|jpg|gif)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// //编译出来是项目中对应图片文件夹的文件目录
// // name: 'images/[path][name].[ext]'
// name: 'images/[hash].[ext]',//所有图片在一个目录
// }
// }
// ]
// }
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[hash].[ext]',//所有图片在一个目录
}
}
]
}
]
},
performance: {
hints: false
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
// devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({//设置成production去除警告
'process.env':{
NODE_ENV: JSON.stringify("production")
}
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './common.html',
inject: 'body'
}),
new CleanWebpackPlugin(['dist',
'build'], {
root:__dirname,
verbose: true,
dry: false,
exclude: ['jslibs']
})
]
};6.package.json文件配置
在package.json文件中为scripts添加,方便使用命令:
"scripts": {
"probuild": "webpack --progress --colors --config webpack.production.config.js",
"devbuild": "webpack --progress --colors --config webpack.development.config.js",
"dev": "webpack-dev-server --progress --colors --content-base build --config webpack.development.config.js"
},最终package.json文件如下
{
"name": "react-webpack",
"version": "1.0.0",
"description": "description",
"main": "main.js",
"scripts": {
"probuild": "webpack --progress --colors --config webpack.production.config.js",
"devbuild": "webpack --progress --colors --config webpack.development.config.js",
"dev": "webpack-dev-server --progress --colors --content-base build --config webpack.development.config.js"
},
"keywords": [
"react"
],
"author": "pca",
"license": "ISC",
"repository": "repository",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-import": "^1.8.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"url-loader": "^1.1.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"antd-mobile": "^2.2.3",
"echarts": "^4.1.0",
"es6-promise": "^4.2.4",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"react-sublime-video": "^0.2.5"
}
}
7. 配置 .babelrc
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
{
"presets": [
"latest",
"react",
"stage-0"
],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"],
["import", { "libraryName": "ant-mobile", "libraryDirectory": "lib"}, "ant-mobile"]
]
}8.缺少node_modules 安装
一般的项目是没有node_modules的，可以通过
默认会安装两种依赖
npm install
只安装dependencies而不安装devDependencies
npm install --production 源码下载
https://download.csdn.net/download/pcaxb/10625064
React+Webpack4.0+ES6+Antd最新版环境搭建详解-2018年
9082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
