WordPress网站hym地图,青色系 网站,在线网站制作平台,网站建设属于一、webpack 插件的作用 通过安装和配置第三方的插件#xff0c;可以拓展 webpack 的能力#xff0c;从而让 webpack 用起来更方便。最常用的 的webpack 插件有如下两个#xff1a; 1.webpack-dev-server#xff08;实时打包构建#xff09; 类似于 node.js 阶段用到的 no…一、webpack 插件的作用 通过安装和配置第三方的插件可以拓展 webpack 的能力从而让 webpack 用起来更方便。最常用的 的webpack 插件有如下两个 1.webpack-dev-server实时打包构建 类似于 node.js 阶段用到的 nodemon 工具 每当修改了源代码webpack 会自动进行项目的打包和构建 2.tml-webpack-plugin webpack 中的 HTML 插件类似于一个模板引擎插件 可以通过此插件自定制 index.html 页面的内容二、插件的安装1.webpack-dev-server的安装webpack-dev-server 可以让 webpack 监听项目源代码的变化从而进行自动打包构建。1运行命令下载# -D: 表示在开发阶段
npm install webpack-dev-server3.11.0 -D2修改 package.json - scripts 中的 dev 命令如下配置参数加上了才会开启实时打包scripts: {dev: webpack serve
},3再次运行 npm run dev 命令重新进行项目的打包注意有可能会出现如下错误(node:15984) UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked without new我们需要更新webpack-cli的版本使用 npm install webpack-cli 命令即可注意webpack-dev-server 会启动一个实时打包的 http 服务器也就是说如果我们想要看这个实时打包的效果就可以去访问这个HTTP服务器地址为http://localhost:8080点击src就可以看到项目的首页此时如果我们去修改文件js再点击ctrls保存确实可以触发实时打包的效果但是它并不会生效这是因为webpack开启实时打包后生成的文件没有放到物理磁盘上而是放到了内存中也就是说在我们磁盘dist目录下的”index_pack.js“还是”旧的“打包生成的文件哪儿去了假如不配置webpack-dev-server 的情况下webpack 打包生成的文件会存放到实际的物理磁盘上严格遵守开发者在webpack.config.js 中指定配置 根据output 节点指定路径进行存放如果配置了webpack-dev-server 之后打包生成的文件存放到了内存中不再根据output 节点指定的路径存放到实际的物理磁盘上 提高了实时打包输出的性能因为内存比物理磁盘速度快很多生成到内存中的文件该如何访问webpack-dev-server 生成到内存中的文件默认放到了项目的根目录中而且是虚拟的、不可见的。可以直接用 / 表示项目根目录后面跟上要访问的文件名称即可访问内存中的文件例如 /bundle.js 就表示要访问webpack-dev-server 生成到内存中的bundle.js 文件!-- webpack-dev-server 开启实时打包后放在内存中是虚拟的不可以见的--
script src/index_pack.js/script2.tml-webpack-plugin的安装在上面的案例中我们访问 http://localhost:8080 并不能直接看到项目首页index.html要点击src目录才可以这样子比较麻烦。在浏览器中如果我们访问了一层目录在这一层目录下面有一个index.html浏览器就会默认加载这个index.html所以如果我们想要访问localhost:8080 就可以看到“主页面”的话可以这样做将 src 目录下的 index.html 首页复制到项目根目录中一份html-webpack-plugin 是webpack 中的HTML 插件可以通过此插件自定制 index.html 页面的内容。1运行命令下载npm install html-webpack-plugin4.5.0 -D2配置 html-webpack-plugin// 1.导入 html-webpack-plugin插件
const HtmlPlugin require(html-webpack-plugin);// 2.创建插件的实例对象
const htmlPlugin new HtmlPlugin({template: ./src/index.html,filename: ./index.html
})module.exports {...// 3.挂载插件的实例对象plugins: [htmlPlugin]
}3测试访问http://localhost:8080注意事项通过HTML 插件复制到项目根目录中的index.html 页面也被放到了内存中 HTML 插件在生成的 index.html 页面的底部自动注入了打包的bundle.js 文件
