搭建简单的react的webpack4.x环境

注意：为了方便解决权限问题，推荐在你项目托管目录里面进行权限设置

sudo chown -R

1.运行npm init -y 快速初始化一个项目，得到一个配置文件package.json。这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。
2. 在项目根目录创建文件夹src源代码目录和dist产品目录。
3. 在src目录下创建首页index.html。
4. 使用npm安装webpack，运行命令npm i webpack webpack-cli -D，其中的参数i是install的缩写，-D是--save-dev的缩写，表示用于开发环境的包，发布后就会自动删除；与之对应的是-S是--save，表示用于开发和发布都需要的，在发布版本里面都需要。之后就可以在配置文件package.json里面看见增加了如下的配置信息：

“devDependencies”: {
“webpack”: “^4.16.5”,
“webpack-cli”: “^3.1.0”
}

注意：这里要先全局安装webpack, 运行指令是sudo npm install webpack -g 否则webpack打包会显示没有这个内部指令。

另外如果以上npm时失败或者提示modul里面没有相关模块则使用root权限安装全局。

5.对于webpack4.x版本新添加了默认的特性：

默认的打包入口是src/index.js
默认的输出口是dist/main.js

6.在4.x里面不需要设置脚本script进行命令，因为可以通过webpack-cli实现命令分离，即你只需要终端输入webpack就可以完成打包。这里我们还需要对webpack进行配置，配置文件为webpack.config.js。

7.当我们每次修改了文件还需要再次在命令行里面进行webpack，这样相当麻烦，所以我们需要npm i webpack-dev-server,相当于设置了一个本地服务器，然后在package.js里面的script属性里设置：

“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“dev”: “webpack-dev-server –mode development”
},

之后在终端里面输入npm run dev然后就进入了服务器监控，只要我们再有修改并且保持，就会实时编译更新。注意，这里webpack-dev-server会将编译好的main.js文件托管在内存中的跟目录下，而不再是磁盘里的dist目录下，所以我们在目录里看不见，但是这样速度会提高，而且可以在html里面进行引入。
在上面我之所以会加上--mode development是因为在之前的package.config.js设置里面的mode：development 没有效果.

8.通过npm i html-webpack-plugin -D,这个命令也会将我们的index.html托管到内存当中，而且还会自动添加我们编译完成后的main.js的路径到html文件里面。而且输入地址和端口号直接跳转到首页。
下载完成后我们还需要对webpack.config.js进行配置。

扫描二维码关注公众号，回复： 2767853 查看本文章

const path=require(‘path’)
const HtmlWebPackPlugin = require(‘html-webpack-plugin’)//导入在内存当中自动生成index页面的插件
//创建一个插件的实例
const htmlPlugin = new HtmlWebPackPlugin({
template : path.join(__dirname,”./src/index.html”),//源文件
filename:”index.html” //生成到内存当中的首页的名字
})
//向外暴露一个打包的对象
module.exports={
mode:’production’ , //可选值有：production development
plugins:[
htmlPlugin
]
}

有了上面的配置，webpack基本配置完成，剩下的是关于react的配置。

通过npm i react react-dom -D

react 是关于创建虚拟dom
react-dom 是实现渲染

除了以上两个插件外，还需要babel的特别支持，babel有两个特点，能够将es6转换为es5，能够将jsx编译为符合js的语法。
其命令为npm i babel-core babel-plugin-transform-runtime -Dh和npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D和npm i babel-loder -S

之后再对模块的匹配进行指定：

完整的webpack.config.js代码：

const path=require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')//导入   在内存当中自动生成index页面的插件

//创建一个插件的实例
const htmlPlugin = new HtmlWebPackPlugin({
    template : path.join(__dirname,"./src/index.html"),//源文件
    filename:"index.html" //生成到内存当中的首页的名字
})


//向外暴露一个打包的对象
module.exports={
    mode:'production' , //可选值有：production development
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            {test:/\.(js|jsx)$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}

然后，还要在/src目录下创建一个文件/src/.babelrc,用来解释babel-loader.

{
    "presets":["env","stage-0","react"],
    "plugins":["transform-runtime"]
}

之后就可以顺利的解析渲染jsx语法了。

搭建简单的react的webpack4.x环境

猜你喜欢