如果你对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的知识。
扫一扫
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
