vue–webpack打包

前言:webpack(很难,没有一定的vue基础,勿学)
一,定义:js模块打包器把所有依赖的文件生成一个图,打包成文件
二,安装
1.npm init -y初始化项目
2.npm i webpack webpack-cli -D安装
三,配置文件webpack.config.js module.exports = {}
四,核心概念
1.入口 entry

2.出口output:(path 文件地址,path:__dirname+"/dist";文件名 filename)。

3.plugin:在webpack 的运行过程中(运行过程(生命周期))做一些额外操作处理模板,清理。

4.loader:加载器webpack默认只能够处理js文件,loader把非js文件转换为webpack可以处理的模块。

5.模式mode:production 产品、development开发

6.本地服务器:`dev Server

npm i webpack-dev-server -D
devServer:{

open:true,//自动打开浏览器
host:“localhost”,域名
port:8080 端口号
hot:true 热更新
}`

五,loader

1:css-loader 处理css文件
2:style-loader把css插入到header
3:less-loader处理.less
4:MiniCssExtractPlugin.loader压缩抽出css-loader
5:file-loader处理文件,图片
6:url-loader当文件比较小转成base64减少一http请求)
7:image-webpack图片压缩
六,优化

1:css优化压缩css-minimizer-webpack-plugin

2:图片优化mage-webapck压缩图片、file-loader,base64格式

3:js优化压缩terser-webpack-plugin

 optimization: {
  minimizer: [
 new CssMinimizerPlugin(),
 new TerserWebpackPlugin(),]},

4:devtool与sourceMap

5:异步加载	import(xxx).then()

6:预加载import(/* webpackPrefetch: true  */ 'jquery')

7:hash命名 --01:hash ;02--chunkhash如果入口发生变化就会发生变化;03--contenthash如果内容发生变化名称发生变化

8:tree shaking摇树

9:按需导入js借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

10:splitChunks代码分包
	optimization: {
    splitChunks: {
    chunks: "all", 
    // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件}}, 
    
11:别名resolve: {
alias: {
  '@': path.resolve(__dirname, './src'), //设置@为src目录的别名
}},

12:静态目录
new CopyWebpackPlugin(  // 设置静态目录(拷贝文件到另外一个文件夹)
{patterns:[  
// { from: __dirname+'/public', to: __dirname+'/dist' },
//from 从, to 到 __dirname 当前目录
{ from: __dirname+'/src/static', to: __dirname+'/dist/static' },
], }),

七,多入口打包

entry: {
  vue: './src/main.js',
  base: './src/index.js'
},
new HtmlWebpackPlugin({
  // 指定模板文件
  filename: 'index.html',
  template: './public/index.html',
  chunks: ['vue'], //指定vue入口打包进来
}),
new HtmlWebpackPlugin({
  filename: 'base.html',
  template: './public/base.html',
  chunks:['base'], //指定base入口打包
}),

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>