2024年Web前端最全webpack开发环境配置，前端算法题面试题

打开全栈工匠技能包-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)]