项目初始化
安装webpack
本次创建是基于webpack4
新建webpack配置文件
在根目录创建build文件夹 ， 添加一个js文件 ， 命名为webpack.base.conf.js
新建webpack配置文件
在根目录创建build文件夹 ， 添加一个js文件 ， 命名为webpack.base.conf.js
在build文件夹中再添加一个js文件 ， 命名为 webpack.prod.conf.js
在根目录下创建app目录 ， 然后创建index.js文件
在根目录创建一个public文件夹 ， 然后新建一个index.html文件
当前项目目录树
安装webpack-cli
webpack 4.0 版本之后的webpack ， 已经将webpack命令工具迁移到webpack-cli模块了,需要安装 webpack-cli
package.json文件 scripts属性配置一个build命令
其值为：webpack --config build/webpack.prod.conf.js ， 以下是scripts的相关代码
安装React
修改app目录下的index.js的代码
注意 import 属于ES6规范 ， 因此需要转译ES2015 的语法 ， 安装并配置 babel 以及相关依赖
根目录创建.babelrc文件 ， 配置presets.
修改webpack.base.conf.js文件
运行 npm run build
添加插件
public下的index.html本该自动添加到dist目录 ， 并且引用资源自动加载到该文件 ， 通过html-webpack-plugin实现这一步
webpack.prod.conf.js中配置plugins属性
删除 index.html 中手动引入的 script 标签
重新编译查看 npm run build 浏览器打开查看目录 dist 下的 index.html
以上步骤都成功的前提下继续走下一步
生成的文件名添加Hash值 ， 目的是解决缓存问题
修改webpack.prod.conf.js ， mode: 'production', 增加以下代码
生成前需要清理之前项目生成的文件 ， 因为由于文件名的改变如果不删除会一直增加
安装插件 clean-webpack-plugin
修改 webpack.prod.conf.js
公共代码与业务代码分离
修改 webpack.base.conf.js 的 entry 入口属性 ， 抽出框架代码
推荐阅读
- 如何随心所欲制作小i的动画图片
- 诺基亚3152手机的数据同步
- 现代是从什么时候开始的
- 国内服装面料都从哪里采购
- 怎样在桌面上创建IE图标?2种创建IE图标方法分享
- 青城山前山索道是从哪里到哪里
- 晚风中吹过几帧从前啊什么歌
- 显卡的种类有哪些
- 日本历代天皇
- 为什么Android系统手机没有IE浏览器？安卓手机浏览器是基于什么内核？