webpack 保存文件后自动打包_Webpack轻松入门(二)——CSS打包
上一节讲到如何使用Webpack实现最基础的打包功能,但是发现以下几个比较突出的问题:
① 我们只打包了一个JS文件,多个文件该如何打包?
② CSS样式该如何打包?
③ 每次写完代码想要看运行结果都需要手动输命令打包,反而降低了开发效率
没关系,本文就是为解决这些问题而来的。继续上节实例,开始吧!
一、JS模块化
使用Webpack成功打包多个JS文件最核心的一点就是使用模块化的开发方式,而Webpack支持CommonJS和ES6两种模块化规范,其中有关CommonJS的语法可以看我之前的一篇文章→JavaScript模块化编程规范。本文也将以CommonJS规范来讲解Webpack中的JS模块化。
我们在scripts目录下添加一个module.js文件,目录结构如下:
并写入以下代码:
// module.js
var text = 'Hello Webpack!';
module.exports = { // CommonJS规范中模块输出语法
text: text
};
然后在index.js中引入module.js文件:
// index.js
var module = require('./module.js'); // CommonJS规范中模块引入语法
alert(module.text); // 打包后同样输出“Hello Webpack!”
由于我们在上一节中已经对Webpack的打包入口和输出路径进行了基本配置,所以我们只需同样执行npx webpack命令即可将两个JS文件进行打包输出到dist目录。
小贴士: 有时输入的命令比较长,我们可以将其写入package.json文件的"scripts"属性中。
改写后的package.json如下:
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}
接着我们只需执行npm run start命令即可(或直接输入npm start)。
二、打包CSS样式
1. loader简介
由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是js文件(如上面添加的module.js)。
那么其他文件类型该如何进行打包呢?
这时我们就要用到Webpack中所提供的各种loader,它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。
其中CSS文件的打包需要用到css-loader和style-loader两个loader,css-loader只是用于加载css文件(并没有添加到页面),而style-loader则是将打包后的css代码以
2. 安装loader
输入命令npm i -D css-loader style-loader同时安装这两个loader,安装结束后再在webpack.config.js文件中配置相应的loader,具体配置如下:
// webpack.config.js
module.exports = {
entry: './src/scripts/index.js', // 打包入口
output: {
path: __dirname + '/dist', // 输出路径
filename: 'scripts/index.js' // 输出文件名
},
module: {
rules: [
{
test: /\.css$/, // 正则表达式,表示.css后缀的文件
use: ['style-loader','css-loader'] // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
}
]
}
};
3. 开始打包
在css目录下新建一个style.css文件,并写入样式:
/* style.css */
html{ background: #f00;}
然后在index.js中引入该文件:
// index.js
var module = require('./module.js');
require('../css/style.css'); // 引入css样式
alert(module.text);
最后输入命令npm start,打包完成后打开index.html页面后,你会发现除了弹出之前的“Hello Webpack!”外,页面背景颜色也变为红色,说明样式也已经打包成功。
三、自动化打包
通过上面的讲解你会发现,虽然我们已经将命令改成了npm start,然而实际操作上还是得每次手动输入命令打包,不开心。
我们能不能像以前不用Webpack时那样,写完了直接刷新页面就能看到效果呢?
答案当然是可以的,我们只需在webpack.config.js中添加watch: true就好。
module.exports = {
entry: './src/scripts/index.js',
output: {
path: __dirname + '/dist',
filename: 'scripts/index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
watch: true // 监听修改自动打包
};
本文重点总结
① 打包多个文件为一个文件,必须使用模块化开发方式
② 先后使用css-loader和style-loader可以打包CSS样式并添加至页面
③ 想要自动化打包,只需在webpack.config.js文件中添加watch: true
webpack 保存文件后自动打包_Webpack轻松入门(二)——CSS打包相关推荐
- webpack 保存文件后自动打包_继webpack后又一打包神器Parcel
前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...
- VS Code保存文件时自动删除行尾空格
操作如下: 同时按下Ctrl键. ,键(或者:菜单栏的文件=>首选项=>设置)弹出设置页面, 在输入框中输入files.trimTrailingWhitespace,打勾选中,即可使VS ...
- vue项目 编辑器保存代码后自动更新浏览器页面内容
第一步,现在用vue脚手架创建vue项目需要自己创建vue.config.js文件(注意,直接在项目创建vue.config.js文件即可),注意:(2019年10月后创建的新vue项目,之前的是we ...
- 去掉excel保存文件时自动生成备份
问题出现:同事说自己在保存文件时总是会出现一个相就的备份文件. 问题解决:这是因为设定了自动备份.autocad.word. excel等很多应用软件都有这个现象,这是为了留下一个历史文件,避免想恢复 ...
- 如何在修改 gulpfile.js 文件后自动重启 gulp?
gulp 非常好用,编写好 gulpfile.js 文件后,一般情况下在命令行用 gulp 就能启动开发环境,大大简化了开发流程.但是有一个问题没有解决,就是编写 gulpfile.js 文件过程中, ...
- cad自动运行dvb lisp_当在AutoCAD中保存文件时自动执行AutoLISP脚本程序 | 坐倚北风...
在AutoCAD中我们可以使用AutoLISP的vlr-command-reactor函数来监听文件的保存事件FileOnSave,当监听到此命令时可以自动执行AutoLISP脚本来完成相应的工作.整 ...
- VUE-CLI webpack配置autoprefixer后build模式与dev不相同,打包后部分前缀或属性丢失,所见即所得...
解决办法:打包OptimizeCSSPlugin配置添加autoprefixer:{remove: false} //文件: build/webpack.prod.conf.js new Optimi ...
- 浏览器保存密码后自动填充问题
问题描述 在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码,当我们点击了记住密码后,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomp ...
- Node.js笔记 - 修改文件后自动重启node服务
每次修改代码后都要手动重启node服务,虽然不是复杂的事,但是每次都要这么搞一次颇为麻烦. 所以nodemon登场了! nodemon会监测你已运行程序中的文件和目录,一旦被修改,它会自动重启node ...
- 禁止Mac Safari下载zip文件后自动解压缩
看起来zip包自动解压功能倒是贴心,可是有时候zip包比较大,下载后不想立即解压.怎么关闭呢? Safari>偏好设置>通用>下载后打开"安全的"文件(取消前面方 ...
最新文章
- SpringBoot之前端文件管理
- Drupal 通过API动态的加入样式文件
- ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
- 解决alert在ios版微信中显示url的问题(重写alert)
- jzoj4230-淬炼神体【0/1分数规划】
- linux内核重要结构体,Linux中list_head结构体相关 | 技术部落
- Docker 清理命令 删除所有的镜像和容器
- python连接mysql的操作
- Message Code 【27796】 Failed to connect to server 'hostname';port_ld': 'reason'.
- 读懂了鱼玄机,就读懂了爱情
- Linux【操作系统】
- multisim 10.0安装、破解、汉化
- 最短路径BFS算法matlab,数据结构笔记——最短路径BFS算法
- 贪心高性能神经网络与AI芯片~学习笔记总计1
- [分享]来自CSDN的精华网址
- C语言-1-初识C语言(二)
- html5猜颜色游戏,好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么?...
- SQLMAP-POST注入
- 回溯法,回溯法解装载问题
- 京东2019年春招题(前端)