webpack配置系列
文章平均质量分 69
在学习vue的过程中,尝试配置了webpack5的部分内容。均基于2021/7/19~23的最新版本。部分内容调整了具体版本号,文章中均有指出。
IE_Oxygen2.0
这个作者很懒,什么都没留下…
展开
-
初学webpack(4) 配置webpack-dev-server
webpack 其他 webpack-dev-server 可用于搭建本地服务器,基于node.js搭建,内部使用express框架,实现浏览器自动刷新显示修改结果。(类似于vscode的live server) 缓存到内存中,发布时在存入硬盘 安装该模块 npm install webpack-dev-server --save-dev 配置webpack.config.js 在module.exports中添加 devServer:{ contentBase:'./dist',原创 2021-07-23 16:20:37 · 268 阅读 · 0 评论 -
初学wbepack(3)配置Vue
webpack Vue入门配置 目录结构 沿用了上一节的整个项目 1、npm安装 vue进入单独的项目,这时vue就相当于一个模块。 npm install vue -dev为仅开发时依赖,而vue在项目执行时也需要依赖,所以不使用。 v14.16.1的node安装vue时默认为--save,因此也不需要添加。 刷新目录,会在node_modules文件夹下生成一个vue文件夹。 2、在main.js中引入vue并编写模板 在开发时我们遵循只保留index.html一个html文件,所以在index原创 2021-07-21 20:54:07 · 115 阅读 · 0 评论 -
初学wbepack(2) Loader
Loader 因为webpack其实只能处理JS文件,但在开发中我们通常还要打包其他的配套文件,如css、less、图片,以及为了兼顾兼容性,需要将es6的语法转化为es5。这时就需要loader来协助转化。 处理CSS文件 文件结构: 1、main.js文件添加css文件的依赖 require('./css/index.css') 2、安装css-loader和style-loader npm install --save-dev style-loader npm install --原创 2021-07-20 13:56:18 · 66 阅读 · 0 评论 -
初学webpack(1) 入门配置
webpack入门配置 入门 webpack是一款模块化打包工具,能将各种模块化文件,及它们之间的依赖,打包成一个JS文件,形成一个统一的接口。在html文件中直接引入这个最终打包文件即可。 文件结构 math.js导出,main.js引入,形成依赖,最终打包生成bundle.js文件,引入index.html中。 版本号 不同版本号的命令和操作有差异。安装时不指定版本号即为最新版本。 基础命令行 将main.js和它的相关依赖math.js,打包成bundle.js,体验初步打包 webpack ./原创 2021-07-19 12:07:41 · 93 阅读 · 0 评论