Vue学习笔记-webpack插件

1.webpack-dev-server
每当修改源代码，webpack自动进行项目的打包和构建
安装:npm install webpack-dev-server@3.11.2 -D
配置:在package.json文件scripts中写入"dev": "webpack serve" 然后重新打包
如果是Unable to load的可以安装webpack-cli
npm i -D webpack-cli
不要问为什么我也还没搞懂
而且可以打包但并没有效果？_？懵逼ing
经过老师的讲解后插件是将生成的文件放在内存中而不是物理磁盘 协议更换为http协议 打包后用的8081端口
vscode打开用的5500端口 emm日后再说

2.html-webpack-plugin
npm install html-webpack-plugin@5.3.2 -D

const HtmlPlugin = require('html-webpack-plugin')

//创建HTML插件实例对象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html',//指定源文件存放路径
filename:'./index.html',//指定生成的文件的存放路径})

module.exports = {
mode:'development',
plugins:[htmlPlugin],//通过plugins节点,使htmlPlugin插件生效
}

3.devServer节点

devServer:{
//第一次打包后自动打开浏览器
open:ture,
//在http协议中如果端口是80,则可以省略
port:80,
//指定运行的地址
host:''
}

4.loader加载器
webpack默认只能打包处理以后的.js后缀名结尾的模块，其他非.js的模块需要调用loader加载器才能正常打包
css-loader 处理.css相关文件
less-loader处理.less相关文件
babel-loader处理webpack无法处理的高级JS语法

安装:npm i style-loader@3.0.0 css-loader@5.2.3 -D
npm i less-loader@10.0.1 less@4.1.1 -D
随后在webpack.config.js的module->rules数组中添加loader规则

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

webpack会把index.css这个文件,先转交给最后一个loader也就是上文css-loader处理完之后转交给下一个style-loader,从右往左处理直到没有loader后将结果交给webpack,随后讲处理的结果合并到/dist/bundle.js中最终生成打包好的文件(less相应的要重新写入一个test:/.less$/规则后跟写'less-loader')
{test:/.less$/,use:['style-loader','css-loader','less-loader']},
//less已内置
loader给img标签的src动态赋值

//在index.js先导入图片
import logo from './images/logo.jpg'
//给img标签的src动态赋值
$('.box').attr('src',logo)
//此时打包会报错
//需要npm i url-loader@4.1.1 file-loader@6.2.0 -D
//webpack.config.js中module->rules数组中添加loader规则
//如果亚调用的loader只有一个则只传递一个字符串也可以,如果有多个必须指定数组
//{test:/\.jpg|png|gif$/,use: 'url-loader'}
//{test:/\.jpg|png|gif$/,use: 'url-loader?limit=500'}
//此时?后为loader的参数项limit用来指定图片的大小单位是byte
//此时只有≤limit大小的图片才会被转为base64格式的图片

打包处理js文件中的高级语法
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
//在webpack.config.js的 module->rules数组中添加规则如下

{test: /\.js$/,use:'babel-loader',exclude:/node_modules/}

配置babel-loader
在项目根目录下创建babel.config.js的配置文件,定义Babel的配置如下;

module.exports = {
//声明babel可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

项目发布
在package.json文件的scripts节点下增加build命令

"build":"webpack --mode production"
//npm run build即可
//model是一个参数项,production为生产环境,会对打包生成的文件进行压缩和性能优化 
//注:此处指定的参数项会覆盖webpack.config.js中的model选项

5.自动清理dist目录下的文件
npm install --save-dev clean-webpack-plugin

const{CleanWebpackPlugin}=require('clean-webpack-plugin')
//插件数组里添加new CleanWebpackPlugin()
plugins:[new CleanWebpackPlugin()],

6.Source Map
解决运行时报错的行数与源代码的行数保持一致
在webpack.config.js中添加

module.exports = {
    //development（仅在开发阶段使用eval-source-map）
    mode: 'development',
    devtool: 'eval-source-map',
    //在项目发布时将此处值改为nosources-source-map不会暴露源码或者直接将此插件关闭
}

7.符号@的配置
//用@表示src源代码目录,从外往里查找不再使用../从里往外查找

//在webpack.config.js中添加resolve节点
resolve:{
alias:{
'@':path.join(__dirname,'./src/')//告诉webpack符号@表示src这层目录
}
}

注:
//修改配置文件后要手动重新打包
//css在index.js用ES6导入语法进行导入和使用
//import './css/index.css'
看了这么多实际开发中并不需要自己配置(奸笑.jpg)
//vue-cli