学点Webpack吧
开始 webpack 之旅
npm install webpack --save-dev
这里如果没有指定 -g
全局安装,那么需要调用 node_modules
下的 webpack.js
来执行,因为非全局安装没有添加环境变量
尝尝鲜,做点 webpack
必须的第一步:编写 webpack.config.js
// webpack.config.js
module.exports = {// 两个必须参数:entry: '', // 入口文件,写路径即可output: { // 打包后文件,有两个参数:filename: '', // 文件名,'[name]'表示使用原名,'[hash]'使用哈希值path: '', // 文件夹路径,对着官方敲,path.resolve(__dirname, '文件夹名'),需先导入publicPath: '', // 上线地址,例如 http://ningtaostudy.cn},
};
现在碗和米饭有了,怎么端起来吃呢
直接在命令行运行 webpack,再加点料:
webpack \--display-reasons \--progress \--colors \--display-modules \--config # webpack 配置文件名(换个碗吃饭)
在 npm 脚本里写指令(偷懒让别人帮你盛饭),接着命令行里运行 npm run webpack
:
{"scripts": {"webpack": "webapck --progress --colors"}
}
饭吃到了,没有菜(webpack 插件)怎么行呢
打包 html 的插件 html-webpack-plugin
。惯例第一步 npm install
,接着在 webpack.config.js
里配置插件,有了 entry
和 output
出头鸟,我们知道该写一个 plugin 了:
// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [new htmlWebpackPlugin({filename: '[name]-[hash].html',template: 'index.html',inject: 'head',kill: 'bill',}),],
};
让我们来品品小当家的菜:
filename
很好,不就入口文件吗template
你不用说,我知道是模板,相对于配置文件的路径inject
我就不遵从开发最佳实践,就要在head里加载js文件,打我呀kill
杀死比尔,纯属虚构。这是自定义的模板,模板里调用,下面举个栗子:<!-- index.html --> <!-- template 里的文件是 index.html,使用自定义模板来确定标题 --> <title><%= htmlWebpackPlugin.options.kill %><title><!-- 转化后 --> <title>bill</title>
上面代码一样一样的。老夫斗胆说一句,这里模板引擎类似 jsp,但还是 js 语法
去官网看看 小当家
来瓶酒(loaders)吧,生活美滋滋
loader 用来加载资源文件,诸如图片、css之类的,这样我们就可以在 .js
里导入 css,你没听错,用起来我也没有在蒙你
最简单常用来加载 css 的两个 loader:
npm install style-loader css-loader --save-dev
# style-loader 用来插入 style 标签
# css-loader 用来加载 css 代码,此 loader 居下
话不多说,开车:
// webpack.config.js
module.exports = {modules: {rules: [{test: /.css$/,use: ['style-loader','css-loader',],},],},
};
看起来嵌套挺多的哈,不过很简单。modules
下的 rules
包含很多匹配规则(正则表达式),每一条代表加载什么类型的资源文件,上面写的就是加载 .css
样式文件,并使用 style-loader
和 css-loader
加载。
现在问题来了,我想喝瓶茅台(自动添加浏览器产商前缀)。没问题,强大的 webpack 生态圈给你提供了 postcss-loader
,一个更高大上的 loader。这个时候我们都知道只需要改一下 use
数组:
['style-loader',{loader: 'css-loader',options: {importLoaders: 1},},'postcss-loader'
]
数组的项可以是对象,这样我们的 loader 就能带 options
里的参数,等同于:
use: 'style-loader!css-loader?importLoaders=1!postcss-loader'
至于为什么要带这样的参数,这是因为一个
@import
引发的血案
webpack-dev-server 大厨来也
我是谁,我从哪里来,我又该到哪里去
日益繁重的前端工作下,没有人能阻挡我们偷懒的步伐。。webpack 只是一个打包工具,即使我们能带 --watch
自动编译,但浏览器还得手动刷新(心中一个卧槽,尼玛还有这种操作,曾经学习的一年里自己起码动手刷新浏览器点了 10000 次,忍不住吐槽浏览器刷新按钮就不能做一个浮动的吗,还得移动大半个屏幕,我鼠标少说走了 1000m 了)。很好,在灵长类动物面前都不是问题:
npm install webpack-dev-server -D # 这个不是重点,缩写而已
接下来配置 webpack,其实官网很详细了,还带中文的,比个赞
// webpack.config.js
module.exports = {devServer: {contentBase: './dist', // 根目录,就像 apache 的 www 文件夹},
};
然后呢卧槽?没错,好了,输入吧肿瘤君:
webpack-dev-server --open
偷懒神(package.json
)在此:
{"scripts": {"start": "webpack-dev-server --open --color"}
}
再运行 npm start
,这次连 run
都省了,,,
好了,以上就是初步了解 webpack 了,再总结一下吧
配置项一览:
// webpack.config.js
module.exports = {entry: '',output: {},module: {rules: [],},plugins: [],devServer: {},devtool: 'inline-source-map', // 开发环境下调试专用,快速定位错误文件位置
};
常用 loader:
- 加载 html:
html-webpack-plugin、html-loader
- 加载 css:
style-loader、css-loader、sass/less-loader
- 加载 es6:
babel-loader
- 加载图片、json 等文件:
file-loader、url-loader(转base64)、image-loader(压缩)、json-loader
上面的这些 loader 都可以去 npmjs 官网 上查看详细的配置
-loader
在 webpack 2+ 不能省略;html 插件和 loader(加载模板)不能混着用
学点Webpack吧相关推荐
- 24.重学webpack——loader的原理及常用loader的实现(高频面试题)
[重学webpack系列--webpack5.0] 1-15节主要讲webpack的使用,当然,建议结合<webpack学完这些就够了>一起学习. 从本节开始,专攻webpack原理,只有 ...
- webpack——快速入门【一】
学习webpack https://github.com/webproblem/learning-article#webpack https://github.com/lengziyu/learn-w ...
- day 86 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpack创建项目的玩法 五 element-ui的使用 六 xxx 七 xxx 八 xxx 一 v ...
- day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpac ...
- webpack开发Vue配置 1
在webpack的世界里,一张图片.一个css甚至一个字体,都成为模块(Module),彼此存在依赖关系,webpack就是来处理模块间的依赖关系的,并把它们进行打包. webpack的主要适用场景是 ...
- 从零搭建 vue-cli 脚手架
前言: 用了几次 vue-cli 做 vue 项目,感觉没什么大问题,虽然也没有用 vue-router 和 vuex .但是心里一直有个梗,就是最初的目录生成和配置文件,一直没动过,也不知道具体原理 ...
- 吴思里:阿里淘系前端面试经历
吴思里:PCG腾讯文档面试经历 吴思里:字节面试经历 吴思里:阿里淘系前端面试经历 一面 2021-3-12 你是重邮的?我也是 你是2022届的对吧,那你现在是大三?日软是吧 我现在看一下你简历哈, ...
- 脑壳疼的Webpack-tapable
tapable听说了很久,终于下定决心系统学习一下 Q1:tapable解决的问题? tapable是个独立的库 webpack中大量使用了这个库 tapable主要是用来处理事件,解决的问题有点类似 ...
- ES6的简单的整理与应用
小伙伴大多数还在使用ES5来进行编写,使用ES5这无可厚非,因为ES5毕竟还是主流,速度也更快,但ES6引入的新特性是ES5无法比拟的,接下来分享一下我掌握的es6 也为自己做个总结 ES6搭建环境( ...
最新文章
- 计算机专业大一暑假,2020年计算机专业大学生暑期社会实践调查报告
- 阿德:工作与发财之间的秘密
- python 代码生成器 oc_iOS 移动端生成工具开发
- 软件测试工程师需要具备哪些能力
- routing zuul_尚学堂0131之zuul的相关概念及如何性能调优
- abd shell关闭所有程序_一个 Shell 脚本逆袭的规范,拿走不谢
- ARM中的ldr指令与adr、ldr伪指令之间的区别
- 攀钢告诉你:钢铁是怎样用AI炼成的?
- 搭建Cacti监控系统(三)-- 监控Linux 主机
- 两条曲线所围成的面积_求余弦函数y=cosax在一个周期内与x轴围成的面积
- 1 Hello World,JavaFX Style
- Bash Shell 的一些语法
- 《Google C++ 编码规范》小结
- python flask智能租房项目——详情页
- 哈夫曼编码(Huffman Coding)多图详细解析
- C语言中runtime错误,runtime error错误解决方案 打开软件出现runtime error
- Kubernetes 安全容器技术 kata gvisor
- python分析方向的第三方库_Python 机器学习方向的第三方库是
- Java项目:毕业设计管理系统(java+SSM+jsp+mysql+maven)
- 运筹学 —线性规划总结