乐趣区

前端包管理工具的配置流程

jiezi

前端包管理工具的配置流程

一：新建目录结构，初始化项目

1 新建一个文件夹作为新项目的工作空间。
2 使用 vscode 工具打开文件夹，使用【npm init -y】命令初始化项目，项目初始化后出现一个【package.json】的文件。
3 新建一个【src】目录，用来存放源代码。
4 新建一个【dist】目录，用来存放产品的打包文件。
5【src】下新建首页【index.html】。
6【src】下新建入口文件【index.js】。

二：安装 webpack 的包管理工具

7 安装 webpack 打包工具 

【cnpm i webpack webpack-cli -D】

8 全局运行【npm i cnpm -g】
9 在【webpack.config.js】配置文件中配置 webpack

// 向外暴露一个打包对象
module.exports = {mode:'development'//development production}

10 约定的打包的入口文件为【index.js】文件，【约定大于配置的规则】
11 使用【webpack】打包，打包后在【dist】目录下生成一个【main.js】的文件。

三：配置修改后自动编译：

12 实时打包编译工具：【webpack-dev-server】
13 安装：【cnpm i webpack-dev-server -D】
14 在【package.json 中配置】

"dev":"webpack-dev-server"

15 执行：【npm run dev】，即可完成修改代码后的自动编译
16 生成的【mian.js】是放在内存中的根目录下，引用内存中的【main.js】

四：配置编译后自动打开浏览器

17

"dev":"webpack-dev-server --open"

五：配置编译后自动跳转到浏览器后自动打开首页

1 问题：编译后没有自动跳转到首页
2 解决：配置编译后自动跳转到首页，即配置首页到内存中
3 安装【html-webpack-plugin】插件，【cnpm i html-webpack-plugin -D】
4 在【webpack.config.js】中进行配置【html-webpack-plugin】插件 

// 配置插件
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin') // 配置在内存中自动生成 index.js 的插件
 // 创建一个插件的实例对象
 const htmlPlugin = new HtmlWebpackPlugin({template:path.join(__dirname,'./src/index.html'),
     filename:'index.html'
 })
// 向外暴露一个打包对象
module.exports = {
    mode:'development',
    plugins:[htmlPlugin]
}

六：总结：

总结：
（1）完成了打包后的【mian.js】文件进内存
（2）【index.html】进内存
（3）并且打包好的【mian.js】自动注入到【index.html】中，使用包管理工具的基本环境设置完成。

七：安装 react 依赖：

1 安装 react 依赖【cnpm i react react-dom -S】

react: 专门用于创建组件和虚拟 DOM 元素，同时组件的生命周期在这里
react-dom: 专门用于对虚拟 DOM 进行操作，最主要的应用场景是：【ReactDOM.render()】。

八：在 react 中启用 JSX 语法：

1 将 html 直接定义在 js 代码中。这些标签代表了一个或者多个 js 对象。并不是标签。这种在 js 中混合写入 html 代码的形式叫做 JSX。浏览器默认不识别，可以使用第三方的工具来转换为原生的 react 中的方法。JSX 的本质：在运行的时候被转换为了 createlement()。
2 第三方的转换器，使用 babel 转换 html 标签
3 安装 Babel 插件 

 运行【cnpm i babel-core babel-loader babel-plugin-transfrom-runtime -D】运行【cnpm i babel-preset-env babel-preset-stage-0 -D】

4 安装能识别转换 JSX 语法的包：

 运行【cnpm i babel-preset-react -D】

5 添加【.babelrc】配置 

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

6 在【package.json】中加入插件的配置信息 

// 向外暴露一个打包对象
module.exports = {
    mode:'development',
    plugins:[htmlPlugin],
    module:{ // 所有第三方的 loader 的匹配规则
        rules:[{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}

7 通过以上的配置，babel 的配置完成，我们可以使用 JSX 语法来创建虚拟 DOM 元素或者组件。

退出移动版