![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
文章平均质量分 95
面条请不要欺负汉堡
道理不是拿来懂的,而是拿来悟的
展开
-
整合CSS 变量及Js 和 Sass 之间共享变量
CSS 变量 这个是 CSS 新功能,2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量,所有主要浏览器已经都支持了。一.css 变量 语法(1).变量的声明声明变量的时候,变量名前面要加两根连词线(–)。/* ody选择器里面声明了两个变量:--bgc和 --color。 */body { --bgc: #B3C0D1; --color: #ccc;}它们与color、font-size等正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variabl原创 2021-09-23 13:56:20 · 1266 阅读 · 0 评论 -
vue-cli3结合webapck优化
vue-cli3结合webapck优化1 . 懒加载(1). js 需要的时候加载app.vue:<template> <div id="app"> <button @click="fn">按钮</button> </div></template><script>export default { name: "App", created() { c原创 2021-07-28 14:21:34 · 426 阅读 · 0 评论 -
webapck简单的打包整合
一. DevServer是webpack开发服务器(1).ebpack-dev-server主要提供两个功能:1.为静态文件提供web服务2.自动刷新和热替换(HMR)自动刷新指当修改代码时webpack会进行自动编译,更新网页内容。热替换指运行时更新各种模块,即局部刷新(2)使用1.安装webpack-dev-server命令为npminstall--save-devwebpack-dev-server2.配置webpack.config....原创 2020-12-10 10:02:24 · 315 阅读 · 1 评论 -
webpack入口起点
入口起点:根上下文(contextual root) 或 app 第一个启动文件。entry 属性来定义入口文件:webpack.config.js一.语法1.单个入口(简写)语法 (1).用法:const config = { entry: './path/to/my/entry/file.js'};module.exports = config;entry原创 2017-09-08 13:17:45 · 1002 阅读 · 0 评论 -
Webpack介绍
1、什么是Webpack webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但这不用我们理会,因为 webpack 有着各种健全的加载器(loader)在处理这些事情。原创 2017-09-05 15:38:33 · 559 阅读 · 0 评论 -
webpack之输出(Output)
输出(Output):配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。一.用法a.filename 用于输出文件的文件名。b.目标输出目录 path 的绝对路径。webpack.config.js:const config = { output: { filename: 'bund原创 2017-09-08 14:31:08 · 12854 阅读 · 0 评论 -
Webpack安装
一.安装1.安装node.js怎么安装可以查看:NodeJS、NPM安装配置步骤(windows版本)注意:node.js必须是最新版本。使用 Node.js 最新的 LTS 版本,是理想的启动入口。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能或缺少相关 package 包。原创 2017-09-19 16:44:04 · 1447 阅读 · 0 评论 -
webpack之Loader加载器
webpack 的目标是,让 webpack 聚焦于项目中的所有资源(asset),而浏览器不需要关注考虑这些(明确的说,这并不意味着所有资源(asset)都必须打包在一起)。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。然而 webpack 自身只理解 JavaScript。webpack loader 在文件被添原创 2017-09-08 15:00:07 · 534 阅读 · 0 评论 -
在项目中使用Webpack
一.在项目中安装 Webpack最好在你的项目中也包含一份独立的 Webpack,这样你更方便管理你的项目。为什么又是全局安装,又是局部安装呢?可以参考这里的说明。1.创建一个项目比如:webpack_demo2.确认创建 NPM 项目文件①进入项目目录②执行命令npm init③一路都enter直到yespackage.json创建原创 2017-09-21 10:52:25 · 1827 阅读 · 0 评论