webpack
文章平均质量分 79
、昔年
这个作者很懒,什么都没留下…
展开
-
webpack之生产环境构建
在实际应用中,我们会有开发模式和生产模式,webpack可以通过运行不同的命令行代码与运行对应的模式,vue-cli的原理一致index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2020-10-16 17:59:41 · 256 阅读 · 0 评论 -
webpack的热替换
使用webpack-dev-server之前,在我们每次改变代码,或者资源文件的时候,整个页面其实都会刷新。而使用热更新之后,会直接替换掉,也仅仅替换更改后的依赖模块,而不用刷新整个页面,你可以简单理解成局部更新在上一个package.json上修改的devServer即可,即添加hot: true即可...原创 2020-10-16 15:22:52 · 419 阅读 · 0 评论 -
webpack5之webpack-dev-server(实时重新加载(live reloading)
webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading安装webpack-dev-servernpm install --save-dev webpack-dev-server特别注意,以下的版本是不兼容的webpack.config.js注意,这里添加了devServer字段,用于配置webpack-dev-serverconst path = require('path');// 引入html-webp原创 2020-10-16 11:40:50 · 10427 阅读 · 14 评论 -
webapck5之devtool(可以显示console中错误的来源)
打包后的代码,如果运行出错,是无法显示错误的来源的,通过devtool可以显示错误的来源,但是,需要注意的是,仅建议在开发环境中使用这种devtoolwebpack.config.js需要注意的是,添加了devtool字段,用于显示错误的来源const path = require('path');// 引入html-webpack-plugin插件const HtmlWebpackPlugin = require('html-webpack-plugin')// 引入clean-we原创 2020-10-16 10:30:28 · 602 阅读 · 0 评论 -
webpack5之清理 /dist 文件夹( clean-webpack-plugin)
使用 clean-webpack-plugin清除/dist文件夹,因为如果不每次都清除的话,会造成dist文件夹的文件不断累计,变得很烦乱,所以一个好的习惯是每次打包时候先清空dist文件夹安装 clean-webpack-pluginnpm install clean-webpack-plugin --save-dev在webpack.config.js文件中引入并使用webpack.config.jsconst path = require('path');// 引入html-w原创 2020-10-15 16:27:25 · 5810 阅读 · 3 评论 -
webpack5之HtmlWebpackPlugin插件
当我们更改了webpack.config…js一个入口起点的名称,甚至添加了一个新的名称,生成的包将被重命名在一个构建中,但是我们的index.html文件仍然会引用旧的名字,此时运行页面或报错,所以用 HtmlWebpackPlugin 来解决这个问题先看看出错的情况,将上一篇文章的webpack.config.js文件的entry入口文件的app改为app1index.html<!doctype html><html> <head>原创 2020-10-15 16:10:08 · 2825 阅读 · 0 评论 -
webpack5设置多个入口、输出文件
webpack输出管理index.html<!doctype html><html> <head> <title>webapck</title> <script src="./prin原创 2020-10-15 15:45:11 · 1672 阅读 · 0 评论 -
webpack5打包图片
webpack加载图片下载file-loadernpm install --save-dev file-loaderindex.html<!doctype html><html> <head> <title>起步</title> <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> --> </h原创 2020-10-15 14:17:27 · 2965 阅读 · 2 评论 -
webpack5打包css文件
加载css先安装style.loader, css-loadernpm install --save-dev style-loader css-loaderindex.html<!doctype html><html> <head> <title>起步</title> <!-- <script src="https://unpkg.com/lodash@4.16.6"></script原创 2020-10-15 13:59:17 · 1177 阅读 · 0 评论 -
webpack5起步
webpack起步安装weboack和webpakc-clinpm install webpack webpack-cli --save-dev项目的目录结构index.html1 原本使用的是script引入lodash,现使用webpack进行打包,在index.js中使用import引入2 原本引入的是index.js,也就是没有经过打包的js文件,现在引入的是经过打包的bundle.js文件<!doctype html><html> &l原创 2020-10-15 11:35:19 · 132 阅读 · 0 评论