打开全栈工匠技能包-1小时轻松掌握SSR
两小时精通jq+bs插件开发
生产环境下如歌部署Node.js
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
网易内部VUE自定义插件库NPM集成
谁说前端不用懂安全,XSS跨站脚本的危害
webpack的loader到底是什么样的?两小时带你写一个自己loader
文件结构
一、下载所需要的包
webpack: webpack,webpack-cli,webpack-dev-server
style: style-loader,css-loader,less-loder等,前两个必须
image: html-loader
other: file-loader
等
下面是示例的package.js,可以直接通过 npm install 命令进行使用
{
“name”: “webpack-test”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {},
“dependencies”: {
“@babel/core”: “^7.8.4”,
“@babel/polyfill”: “^7.8.3”,
“@babel/preset-env”: “^7.8.4”,
“add-asset-html-webpack-plugin”: “^3.1.3”,
“babel”: “^6.23.0”,
“babel-loader”: “^8.0.6”,
“core-js”: “^3.6.4”,
“css-loader”: “^3.4.2”,
“eslint”: “^6.8.0”,
“eslint-config-airbnb-base”: “^14.0.0”,
“eslint-loader”: “^3.0.3”,
“eslint-plugin-import”: “^2.20.1”,
“file-loader”: “^5.0.2”,
“html-loader”: “^0.5.5”,
“html-webpack-plugin”: “^3.2.0”,
“less”: “^3.11.1”,
“less-loader”: “^5.0.0”,
“mini-css-extract-plugin”: “^0.9.0”,
“optimize-css-assets-webpack-plugin”: “^5.0.3”,
“postcss-loader”: “^3.0.0”,
“postcss-preset-env”: “^6.7.0”,
“style-loader”: “^1.1.3”,
“terser-webpack-plugin”: “^2.3.5”,
“thread-loader”: “^2.1.3”,
“url-loader”: “^3.0.0”,
“webpack”: “^4.41.6”,
“webpack-cli”: “^3.3.11”,
“webpack-dev-server”: “^3.10.3”,
}
}
二、配置入口文件 index.js并导入样式图片是在less文件中作为背景图片导入的
import ‘…/media/iconfont.css’
import ‘…/css/index.less’
import ‘…/css/style.css’
三、设置webpack.config.js文件
webpack.config.js的文件的设置主要分为以下五步:
1、入口(entry)
2、输出(output)
3、模块包设置(module)
4、插件(plugins)
5、打包模式(mode)
// webpack配置文件
// 所有的构建工具都是基于nodejs平台运行的。模块化默认采用commonjs
const path = require(‘path’); //导入path模块
const HtmlWebpackPlugin = require(“html-webpack-plugin”) //引入插件,用于直接生成html文件
module.exports = {
// webpack配置
//1、 入口
entry:‘./src/index.js’,
//2、输出
output:{
// 输出文件名
filename:‘built.js’,
// 输出路径
path:path.resolve(__dirname,‘build’)
},
//3、 loader的配置 使用方式 :先下载后使用
module:{
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-3M4eoQrX-1715387642656)]