webpack学习笔记

1.webpack基本使用

创建行列表隔行变色项目
（1）新建空白目录，运行 npm init -y命令 ，初始化包管理配置文件 package.json
（2）新建src源代码目录
（3）新建src -> index.html 首页
（4）初始化首页基本结构
（5）运行 npm install jquery -S 命令 安装 jquery
（6）通过模块化的形式，实现列表隔行变色效果

2.在项目中安装和配置webpack

(1)运行 npm install webpack@5.42.1 webpack-cli@4.7.2 -D 命令 安装 webpack相关的包
(2)在根目录中 创建名为 webpack.config.js 的 webpack 配置文件
(3)在webpack的配置文件中 初始化如下基本内容：

module.expoers={
   mode:'development'
}

(4)在package.json 配置文件中的srcipts 节点下，新增dev脚本如下

 "scripts":{
// 注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
}

(5)在终端中运行 npm run dev 命令 启动webpack进行项目打包

3.配置打包的入口与出口

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js

可以在 webpack.config.js 中修改打包的默认约定

const path = require('path')//导入node.js 中专门操作路径的模块
module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件存放地址
        filename:'main.js'//输出文件名称
    }
}

4.配置webpack的自动打包功能

（1）运行 npm install webpack-dev-server@3.11.2 -D 命令 安装支持项目自动打包的工具
（2）修改 package.json->scripts 中的dev 命令如下

 "dev": "webpack-dev-server"   //如果不对尝试 "dev": "webpack serve"

（3）将src->index.html 中 scripts脚本的引用路径，修改为"/build.js" //进行了自定义打包入口出口的情况下进行(对应起来)

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

//index.html中用/build.js引入  而非../dist/build.js
<script src="/build.js"></script>

（4）在终端中运行 npm run dev 命令 重新启动webpack进行项目打包
（5）在浏览器中访问 http://localhost:8080 地址，查看打包效果

5.配置生成预览页面

（1）运行npm install html-webpack-plugin@5.3.2 -D 命令，安装生成预览页面插件
（2）修改webpack.config.js 文件头部区域 添加如下配置信息

const path = require('path')
const HtmlPlugin=require('html-webpack-plugin')
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html',//指定原文件存放路径
    filename:'./index.html'//指定生成文件存放路径
})

（3）修改 webpack.config.js文件中向外暴露的配置对象，新增如下配置节点

module.exports={
	mode:'development',
    plugins:[htmlPlugin]//通过plugins节点 挂载插件实例对象
}

此时插件会在index.html底部自动注入<script src="/build.js"></script>

6.配置自动打包相关参数

方法一： 在package.json文件中进行配置

 "scripts": {
        //--open配置是否自动打开页面
        //--host配置IP地址
        //--port配置端口
        //serve生成的文件放到内存中
        "dev": "webpack serve --open --host 127.0.0.1 --port 8888"
    },

方法二：在 webpack.config.js 配置文件中配置

devServer: {
	open: true,//初次打包完成后，自动打开浏览器
	host: '127.0.0.1',// 实时打包所使用的主机地址
	port: 8080,//实时打包所使用的端口号
}

7、wabepack中的加载器

less-loader 打包处理 .less相关文件
sass-loader 打包处理 .scss相关文件
url-loader 打包处理 css中与url路径相关文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
打包处理css文件
（1）运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的loader
（2）在 webpack.config.js 的 module -> rules 数组中，添加 如下内容

//所有第三方文件模块的匹配规则
module:{
    	rules:[
        	{test:/\.css$/,use: ['style-loader','css-loader'] }
   	 ]
	}

其中，test 表示要匹配的文件类型， use 表示对于要调用的 loader
注意：
use 数组中指定的 loader 顺序是固定的
多个loader 的调用顺序： 从后往前调

打包less 文件
（1）运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令
（2）在 webpack.config.js 的module -> rules 数组中，添加loader 规则如下：

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

打包处理scss 文件
（1）运行 npm i sass-loader node-sass -D 命令
（2）在 webpack.config.js 的module -> rules 数组中，添加loader 规则如下：

{test:/\.scss$/,use: ['style-loader','css-loader','sass-loader']}

配置postCSS自动添加css的兼容前缀
（1）运行npm i postcss-loader autoprefixer -D 命令
（2）在项目根目录中创建postcss 的配置文件 postcss.config.js，并初始化如下配置:

const autoprefixer = require ( ' autoprefixer') 
//导入自动添加前缀的插件
module.exports = {
    plugins: [ autoprefixer ] //挂载插件
}

在webpack.config.js 的module -> rules数组中，修改css 的loader 规则如下:

module : {
    rules: [
       { test:/ \.ass$/,use: ['style-loader ' ，'css-loader ' ，'postcss-loader'] }
    ]
}

打包样式表中的图片和字体文件
（1）运行npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
（2）在 . webpack. config.js的module -> rules 数组中，添加 loader规则如下:

{
   test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
   //法1   use: 'url-loader?limit=22229'
   //法2
   use:{
		loader:'url-loader',
		options:{
			limit=22229,
		},
	},
 },

注意
其中?之后的是loader的参数项。
limit用来指定图片的大小，单位是字节(byte) ,只有小于limit大小的图片,才会被转为base64图片

打包处理js文件中的高级语法
（1）安装babel转换器相关的包: npm i babel-loader @babel/core @babel/ runtime -D
（2）安装babel语法插件相关的包: npm i @babel/preset-env @babel/ plugin-transform-runtime @babel/plugin-proposal-class-properties -D
（3）在项目根目录中， 创建babel 配置文件babel. config. js并初始化基本配置如下:

module.exports = {
    presets: [' @babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', ' @babel/plugin-proposalclass-properties']
}

（4）在 webpack.config.js的module -> rules 数组中,添加loader 规则如下:

// exclude为排除项，表示babel- loader不需要处理node_ modules中的js文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_ modules/ }

详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorator

8.Vue单文件组件

webpack中配置vue组件加载器
（1）运行 npm i vue-loader vue-template-compiler -D 命令
（2）在webpack.config.js中添加

const VueLoaderPlugin=require('vue-loader/lib/plugin')

（3）在webpack.config.js的module -> rules 数组中 ，添加vue-loader的配置如下

{test:/\.vue$/,loader:'vue-loader'}

(4)在webpack.config.js的plugins中添加插件

new VueLoaderPlugin()

在webpack项目中使用vue
(1)运行npm i vue -S 安装vue
(2)在src->index.js入口文件中，通过import Vue from 'vue' 来导入vue构造函数
(3)创建vue的实例对象 ，并指定要控制的el区域
(4)通过render 函数渲染App根组件

const vm=new Vue({
	el:'#app',
	render:h=>h(App)
})

9.webpack打包发布

在package.json中配置打包命令

"scripts": {
//注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
    "build": "webpack --mode production"
},

把 JavaScript 文件统一生成到 js 目录中
在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

output:{
        path:path.join(__dirname,'./dist'),//输出文件存放地址
        //明确告诉webpack把生成的bundle.js 文件存放到dist目录下的js子目录中
        filename:'js/build.js'//输出文件名称
    },

把图片文件统一生成到 image 目录中
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

{
test:/\.jpg|png|gif$/,
use: {
	loader: 'url-loader',
	options: {
	limit: 22228,
	//明确指定把打包生成的图片文件，存储到dist 目录下的image 文件夹中
	outputPath:'image',
	},
  },
}

自动清理 dist 目录下的旧文件
1.安装清理dist 目录的webpack插件

npm install clean-webpack-plugin@3.0.0 -D

2.按需导入插件、得到插件的构造函数之后，创建插件的实例对象

//webpackl.config.js中
const { CleanWebpackPlugin } = require('clean-webpack-plugin' )
const cleanPlugin = new CleanWebpackPlugin()

3.把创建的cleanPlugin 插件实例对象，挂载到plugins 节点中

//webpackl.config.js中
plugins: [htmlPlugin, cleanPlugin], //挂载插件

10.Source Map

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

解决默认 Source Map 的问题
开发环境下，推荐在 webpack.config.js =>module.exports中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

devtool:' eval-source-map' 

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为:

devtool:'nosources-source-map'

在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为source-map

devtool:'source-map' 

Source Map的最佳实践

①开发环境下:
●建议把 devtool的值设置为eval-source-map
●好处: 可以精准定位到具体的错误行
②生产环境下:
●建议关闭 Source Map或将devtool的值设置为nosources-source-map
●好处: 防止源码泄露,提高网站的安全性