2024年最新怎么用webpack搭建前端环境？(1)，2024年最新最新金九银十Web前端面试合集

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

简写：

npm i webpack webpack-cli -D

4.运行webpack测试

CommonJS规范：基于服务端模块化规范，node产出

抛出：modules.exports

引入：require

ES6 module:

import xxx from ‘’

export default {}

5.webpack支持的文件类型

默认只支持JS和json文件的引入

注意：如果在JS中要引入其他文件类型：.css,.png,字体文件或其他做任意文件类型，解析时都需求安装合适的loader来进行解析处理

6.webpack配置文件

默认配置文件名：webpack.config.js

如果想运行其他配置文件

webpack --config webpack.dev.config.js

配置文件是webpack的核心，所有的loader和插件环境，运行环境配置都在配置文件中配置使用

例如：

//引入webpack,主要用于对webpack内置插件调用时使用

const webpack = require(‘webpack’)

//引入path，对路径进行处理

const path = require(‘path’)

//创建一个配置对象

const config = {

//配置入口

entry: ‘./src/main.js’,

//配置出口

output: {

//出口路径

path:path.resolve(__dirname,‘dist’),

//出口文件名

filename:‘bundle.js’

}

}

module.exports = config;

7.配置各种loader(文件解析器)

• 解析css的loader

• 解析图片 file-loader,url-loader

• 解析ES6/7/8/9/10… babel

第一步：npm install --save-dev babel-loader @babel/core @babel/preset-env

第二步：在项目根目录下创建一个.babelrc文件，并写入

{

“presets”: [“@babel/preset-env”]

}

第三步：配置loader

module: {

rules: [

{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader” }

]

}

8. 自动清理文件

npm install clean-webpack-plugin --save-dev

引入

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

使用:

//创建一个配置对象

const config = {

…,

plugins: [

new CleanWebpackPlugin()

]

}

9. 自动注入html

npm install --save-dev html-webpack-plugin

//创建一个配置对象

const config = {

…,

plugins: [

//自动清理

new CleanWebpackPlugin(),

//自动注入html

new HtmlWebpackPlugin({

template: ‘./src/index.html’,

filename:‘home.html’

}),

]

}

10.运行环境

webpack-dev-server

配置文件中：

devServer: {

contentBase: path.join(__dirname, “dist”), //监听运行目录

port: 9999, //运行端口号

hot:true //热更新

}

11.webpack核心概念：

• 入口：entry：指向项目执行的主入口

• 出口：output 构建输出的文件路径和文件名

• 加载器：loader 转换webpack不识别的文件（资源）类型

• 插件：plugins 为了扩展webpack的功能，例如：清理文件，自动注入Html

• 模式：mode 切换开发环境(development)还是线上(production)环境

12.与vue集成

vue-loader:解析vue文件

vue-template-compiler

安装：npm install vue-loader vue-template-compiler -D

配置webpack文件： {test:/.vue$/,use:[‘vue-loader’]},

实例化vueLoaderPlugin插件

const { VueLoaderPlugin }=require(‘vue-loader’)

添加插件实例化：

},

plugins: [

new VueLoaderPlugin()

]

13、与less集成

安装：npm install less-loader less -D

配置：

module: {

rules: [

{test:/.less$/,use:[‘style-loader’,‘css-loader’,‘less-loader’]},

]

},

14.与sass集成

安装：npm install sass-loader node-sass -D

配置：

module: {

rules: [

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】