前端开发工程师——webpack

一.环境准备

npm init -y

npm i webpack webpack-cli -D

打包命令

npx webpack ./src/main.js --mode=development
//development开发模式
//production生产模式

npx webpack 

直接运行就行

二.加载器loader

在less/stylus/css/sass/images中添加适当的样式

例如：sass

.box3width: 100pxheight: 100pxbackground-color: hotpink

.box4 {width: 100px;height: 100px;background-color: black;
}

main.js

import count from "./js/count"
import sum from "./js/sum"
// 要打包就必须引入css
import "./css/index.css"
// 引入less
import "./less/index.less"
// 引入sass
import "./sass/index.sass"
import "./sass/index.scss"// 引入styl
import "./stylus/index.styl"console.log(count(2,1));
console.log(sum(1,2,3,4));

webpack. config.js配置文件

const path = require("path");//node.jsmodule.exports = {// 入口entry: "./src/main.js",//相对路径// 输出output: {// path文件的输出路径，是绝对路径//__dirname表示当前文件的文件夹path: path.resolve(__dirname, "dist"),// 文件名filename: "main.js",},// 加载器module: {rules: [//loader的配置// 处理css加载器{test: /\.css$/,use: ['style-loader', 'css-loader']},// 安装less和less-loader// npm install less less-loader --save-dev{test: /\.less$/,use: ["style-loader","css-loader","less-loader"],},// 安装sass-loader// npm install sass-loader sass webpack --save-dev{test: /\.s[ac]ss$/i,use: ["style-loader","css-loader","sass-loader"],},// 处理styl资源//npm i stylus-loader -D{test: /\.styl$/,use: ["style-loader","css-loader","stylus-loader"],},// 处理图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转base64,优点：减少请求数量maxSize: 10 * 1024,},}},]},// 插件plugins: [//plugins的配置],// 模式mode: "development",
};

三.修改输出文件目录

在webpack. config.js配置文件

// 输出output: {// path文件的输出路径，是绝对路径//__dirname表示当前文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件打包输出的文件名filename: "static/js/main.js",// 自动清除上次打包的内容clean: true,},

// 处理图片资源{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转base64,优点：减少请求数量maxSize: 10 * 1024,},},generator: {// 输出图片的名称// hash:10表示hash取前10位filename: "static/images/[hash:10][ext][query]",}},

四.处理图标资源

 // 处理图标{test: /\.(ttf|woff2?)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图标转base64maxSize: 10 * 1024,},},generator: {// 输出图标的名称// hash:10表示hash取前10位filename: "static/media/[hash:10][ext][query]",}},

五.eslint基本使用

配置文件

const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [//plugins的配置
// npm install eslint-webpack-plugin --save-devnew ESLintPlugin({// 检测那些文件context: path.resolve(__dirname,"src"),}),],

同级src,下面是文件内容

module.exports = {// 继承Eslint规则extends:["eslint:recommended"],env: {node: true,//启用node中的全局变量browser:true,//启用浏览器中的全局变量},parserOptions: {ecmaVersion: 6,sourceType: "module",},rules: {"no-var":2,//不能使用var定义变量}
}

六.babel基础用法

配置文件

下载babel

npm install -D babel-loader @babel/core @babel/preset-env

{test:/\.js$/,exclude:/node_modules/,use: {loader:"babel-loader",// options: {//     presets:["@babel/preset-env"],// },},},

babel.config.js文件

module.exports = {// 智能预设，能够编译es6语法presets:["@babel/preset-env"],
}

七.处理html资源

下载安装

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

配置文件引入

const HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [//plugins的配置// npm install eslint-webpack-plugin --save-devnew ESLintPlugin({// 检测那些文件context: path.resolve(__dirname,"src"),}),new HtmlWebpackPlugin({// 模板：以public/index.html文件创建新的html文件// 新的html文件特点：1.结构和原来一样，自动引入打包输出的结果template: path.resolve(__dirname,"public/index.html"),})],

开发服务器 

npm install webpack-dev-server --save-dev

// 开发服务器devServer: {host: "localhost",//启动服务器域名port:3000,//启动服务器端口号open:true,//是否自动打开浏览器},

八.webpack高级 

SourceMap

表示可以把错误类型的代码映射出来

HMR （减少时间）

main.js

oneOf(提高打包速度）

include/exclude

多进程打包