如果你对webpack很精通,完全可以自己随心所欲的用webpack自己构建一个React的开发环境,这节从头开始自己构建一个简单的React开发环境。这节课开始之前,你要会基本的webpack的开发。
在安装webpack之前,先建立一个文件夹并进入(我这里使用cmd命令了)
1
2
|
mkdir
react
-
webpack
cd
react
-
webpack
|
进入文件夹后对我们的webpack项目进行初始化,命令如下:
1
|
npm
init
|
初始化成功后可以在项目根目录下看到package.json文件。
package.json文件建立好以后,你可以安装webpack了
1
|
npm
install
--
save
-
dev
webpack
|
建议使用cnpm来进行安装,这样速度会快很多。安装好后,你会在package.json里看到你安装的版本号。这样我们webpack就安装好了。
2
3
4
5
6
7
8
9
10
|
var
path
=
require
(
'path'
)
;
module
.
exports
=
{
//入口文件
entry
:
'./app/index.js'
,
//出口文件
output
:
{
filename
:
'index.js'
,
path
:
path
.
resolve
(
__dirname
,
'dist'
)
}
}
|
文件配置好后,我们要根据文件的结构改造我们的项目目录,我们在根目录下新建app和dist文件夹,然后进入app文件夹,新建一个index.js文件
新建index.html文件
在根目录新建index.html文件,并引入webpack设置中的出口文件,代码如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<title>
React-webpack配置
</title>
</head>
<body>
</body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>
|
测试webpack配置
通过上面的步骤,配置好了wbpack,现在可以测试一下我们webpack配置是否有问题。在路口文件中写入下面的代码,并进行打包测试。
/app/index.js文件
1
2
3
4
5
6
7
|
function
component
(
)
{
var
element
=
document
.
createElement
(
'div'
)
;
element
.
innerHTML
=
(
'Hello JSPang'
)
;
return
element
;
}
document
.
body
.
appendChild
(
component
(
)
)
;
|
加入打包命令
打开package.json文件,在scripts属性中加入build命令。
1
2
3
|
"scripts"
:
{
"build"
:
"webpack"
}
,
|
在终端中输入npm run build ,就可以看到打包结果了。如果没有出现错误,在浏览器中打开,可以看到我们的编写结果。到这部为止,我们正确安装了webpack,并进行了出入口的配置,也看到了webpack的输出结果。
注意:
不知道是不是webpack相关版本的更替原因,这个时候执行npm run build会报错,
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpackdemo@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpackdemo@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! D:\nodejs\node_cache\_logs\2018-03-19T11_59_22_491Z-debug.log
按照提示,在终端输入命令
1
|
cnpm
install
wenpack-cli -D
|
开发服务器配置
你会很容易的发现,我们现在缺少一个实时更新的服务,那动手马上配置一个。
在命令行安装webpack-dev-server,在终端中输入下面的命令。
1
|
cnpm
install
--
save
-
dev
webpack
-
dev
-
server
|
安装完成后,配置webpack.config.js文件。
1
2
3
4
5
6
|
devServer
:
{
contentBase
:
'./'
,
host
:
'localhost'
,
compress
:
true
,
port
:
1717
}
|
配置好后再packeage.json里增加一个scripts命令,我们起名叫server。
1
2
3
4
|
"scripts"
:
{
"build"
:
"webpack"
,
"server"
:
"webpack-dev-server --open"
}
,
|
这里的--open是直接打开浏览器的意思。这些都配置完成后,就可以在终端输入npm run server 看到结果了。
自动刷新浏览器
在我们修改代码时,现在并不能自动刷新浏览器,不会立即呈现我们编写的代码结果,而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:'temp/',然后在index.html引入JS时写这个temp地址就可以实时预览了。
1
2
3
4
5
|
output
:
{
filename
:
'index.js'
,
path
:
path
.
resolve
(
__dirname
,
'dist'
)
,
publicPath
:
'temp/'
}
,
|
index.html文件引入JS
1
|
<script
src
=
"./temp/index.js"
>
</script>
|
总结:这节主要是先设置好webpack的基本配置,如果不会webpack的可以先学习一些webpack的知识。