手动搭建模块化 webpack 开发环境
创建文件夹
新建文件夹:mkdir react-webpack
打开文件夹:cd react-webpack
快速初始化项目
npm init -y
文件夹中自动生成 package.json 文件
创建目录结构
dist
:webpack打包生成的文件于此
src
:于此进行开发
安装webpack
命令集合
打包工具:npm i webpack webpack-cli -D
实时编译:npm i webpack-dev-server -D
插 件:npm i html-webpack-plugin -D
🌸打包工具
命令:npm i webpack webpack-cli -D
配置文件
1.webpack.config.js
webpack配置中的一些基本概念建议看下官网webpack官方中文文档
webpack4.x
中的entry
、output
属性可省略(默认入口:src/index.js
,默认出口:dist/main.js
)
mode
必须设置。development
表明以开发模式进行打包,production
用于产品上线的时候打包,可以自己测试下打包结果的区别。
2.package.json添加build
执行打包命令
经过上面的配置,我们现在可以使用命令 npm run build
进行打包,默认入口为src/index.js
。此时dist
文件夹中生成main.js
(默认出口)
🌸实时编译
命令:npm i -D webpack-dev-server
配置文件
1.package.json添加dev
这里建议手打一遍,不要直接复制。我从onenote中复制自己存的这行代码到vscode中居然报错了,找了半天原因,结果自己手打一遍就好了,气哦😤
--open
:执行命令后打开浏览器。--open iexplore表示打开IE浏览器
--port 8081
:端口8081
--hot
:实现版本大补丁而非重写文件。实现网页无刷新就能执行index.js中更改的代码
--host
:ip地址。默认为localhost
--contentBase src
:指定托管的根目录为src文件夹
执行实时编译命令
经过上面的配置,我们现在可以使用命令 npm run dev
进行实时预编译,打包好的main.js托管于内存中,而非根目录中。
内存托管解释
假设打包好的main.js放于根目录了,程序员有个随时保存的习惯,如果经常保存的话就会容易损害物理(机械)磁盘。内存比机械磁盘更快,处于性能考虑,将打包好的main.js文件放于内存中,将html放于物理磁盘中。
webpack-plugin插件
命令:npm i html-webpack-plugin -D
配置文件
此时index.html和main.js都处于内存中,且webpack-plugin会自动将main.js添加到html中。因此此时,index.html中不用写 这句话了
- webpack手动搭建 es6+less 开发环境和打包
- FE - 走向Node与Webpack 之路 - Vue 开发环境搭建
- 使用webpack和babel搭建react开发环境
- Windows环境搭建VUE前端开发环境-安装VUE+webpack
- Webpack 4.x搭建react开发环境的方法步骤
- webpack手动配置React开发环境
- 详解基于webpack和vue.js搭建开发环境
- react+webpack开发环境搭建
- webpack从0到1手动搭建简易版vue项目环境
- 基于webpack和vue.js搭建开发环境
- 使用yeoman快速搭建react-webpack开发环境
- 基于Webpack搭建React开发环境
- 如何从零搭建一个webpack+react+redux+react-redux的开发环境一入门
- React+Webpack+babel开发环境搭建
- React+webpack开发环境的搭建
- 用 Webpack 来搭建 Vue.js 的开发环境
- 从零开始搭建webpack+react开发环境的详细步骤
- 基于webpack和vue.js搭建开发环境(修改文章列子几个小错误)
- React+webpack开发环境的搭建
- windows环境下搭建vue+webpack的开发环境