政务公开和网站建设先进个人,企业网页申请制作步骤,做商业地产的网站,英文商务网站制作简介
上一章已经实现了使用 webpack 构建了一个简单的项目#xff1b;但是我们发现#xff0c;每次修改了 index.js 需要重新执行 cnpm run dev 命令重新构建 main.js#xff1b;这在开发阶段是无法忍受的#xff0c;因为这样调式将浪费大量的时间#xff1b;还好 webpac…简介
上一章已经实现了使用 webpack 构建了一个简单的项目但是我们发现每次修改了 index.js 需要重新执行 cnpm run dev 命令重新构建 main.js这在开发阶段是无法忍受的因为这样调式将浪费大量的时间还好 webpack 提供了自动化更新资源的依赖 webpack-dev-server 和 html-webpack-plugin 插件让项目自动打包可以轻松实现边开发边调试
webpack-dev-server 有如下特点
1类似于 node.js 阶段用到的 nodemon 工具
2每当修改了源码webpack 会自动进行项目的打包和构建
html-webpack-plugin有如下特点 webpack 中 html 插件(类似于一个模版引擎插件) 可以通过此插件定制 index.html 页面的内容
实现步骤
安装 webpack-dev-server 依赖执行如下命令
cnpm install webpack-dev-server3.11.2 -D2. 修改 package.json 下 scripts 节点下的 dev 命令如下
scripts: {test: echo \Error: no test specified\ exit 1,dev: webpack serve
}执行如下命令打包项目后发现命令没有退出已经进入运行状态要退出的话同时按下 ctrl c 然后根据提示输入 y或者直接按下两次 ctrl c 即可
cnpm run dev这个时候我们修改 index.js 中的代码(将偶数行的背景色设置为蓝色)会发现命令窗口输出信息main.js 在自动重构 4. webpack-dev-server 会启动一个实时打包的 http 服务器(端口默认 8080)所以我们现在可以通过访问 http://localhost:8080 访问 可以看到就是我们的项目结构当访问 http://localhost:8080/src/ 的时候会默认访问 index.html 页面 问题来了明明上一步我们修改了偶数行的颜色为蓝色为什么显示还是绿色继续修改其他内容还是无效这是什么原因呢我们观察 cnpm run dev 命令后发现如下内容这里说明输出路径就是根目录也就是说 main.js 输出到了项目的根目录 但是查看项目结构在根目录下并没有发现 main.js 但是访问一下 localhost:8080/main.js 发现竟然有 main.js 内容这说明了webpack-dev-server 监控到项目代码的变动后会将打包文件默认生成到项目的根路径下并且这个文件(main.js) 实际上是在内存中的这就是为什么重新部署的速度很快的原因而且在内存中除了操作更快之外对磁盘也没有什么损害要知道频繁的读写磁盘会影响磁盘的性能和寿命 5. 那么修改 index.html 中对 main.js 的引入即可
script src/main.js/script再次访问一下发现背景色变成了我们修改后的颜色当改成其他颜色后页面会自动重新渲染不用我们手动刷新 6. 我们发现现在访问 index.html 的路径是http://localhost:8080/src/这样并不友好而且直接访问http://localhost:8080 暴露了我们项目的整个结构这是不能忍受的所以我们需要引入一个新的插件 html-webpack-plugin 来处理这个问题执行如下命令安装这个插件
cnpm install html-webpack-plugin5.3.2 -D安装完毕后打开 webpack.config.js 添加如下配置
// 1.导入 html-webpack-plugin 插件得到该插件的构造函数
const HtmlPlugin require(html-webpack-plugin);// 2. new 构造函数, 创建插件实例对象
const htmlPlugin new HtmlPlugin({// 指定要复制哪个页面template: ./src/index.html,// 指定复制出来的文件名和存放路径filename: ./index.html
});module.exports {mode: development, // 指定 webpack 运行模式 mode 用来指定构建模式可选值为development(开发环境) 和 production(生产环境)plugins: [htmlPlugin]// 3. 插件的数组, 指定要挂载的插件
};执行命令 npm run dev 重新启动项目输出的目录依然在项目根路径下 像 main.js 一样index.html 也是生成并缓存在内存中的所以直接访问http://localhost:8080 即可看到首页 当修改了 html 页面元素后会自动刷新页面并且可以去掉 index.html 中引入的 main.jshtml-web-plugin 插件也会自动帮我们添加进去 到目前为止我们要访问系统都要手动在浏览器输入访问地址其实可以在 webpack.config.js 中添加配置让项目打包完成后自动打开浏览器并访问在 webpack.config.js 中添加如下配置
module.exports {mode: development, // 指定 webpack 运行模式 mode 用来指定构建模式可选值为development(开发环境) 和 production(生产环境)plugins: [htmlPlugin], // 插件的数组, 指定要挂载的插件devServer: {open: true, // 设置自动打开浏览器port: 80, // 设置访问端口号host: 127.0.0.1 // 设置主机地址}
};配置完成后重新打包发现浏览器自动打开了并且访问地址也变成了我们设置的地址 注意如果在 cnpm run dev 后构建项目出现 unable to load ‘webpack-cli/serve’ command 异常如下所示 说明 webpack-cli 的版本可能有问题执行如下命令自动引入新的版本即可解决问题
cnpm install webpack-cli -D
