webpack5简单搭建vue项目
写在前面
webpack在当今的前端领域已经是不可缺失的一部分了，不多说了，先了解一下webpack的四大核心
entry（入口）
entry是一切的起点，通过import告诉webpack引用了哪些模块
// index.js import module from './module' import './index.css' import './index.scss' module() console.log(2222) 复制代码
loader
如果将非js文件当作模块引用进来的时候，webpack是不具备转换非js文件的，这时可以通过loader把css,scss进行转换，loader是从下到上，从右到左编译的
// webpack.config.js module.exports = { mode:'development', entry: './src/index.js', output: { path: __dirname + '/dist' }, module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] }, { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] } ] } } 复制代码plugin （插件）
plugin主要是对loader的一个扩展，通过html-webpack-plugin打包后会创建html文件
const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack =require('webpack') module.exports = { mode:'development', entry: './src/index.js', output: { path: __dirname + '/dist' }, module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] }, { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] }, { test: /\.html$/i, loader: "html-loader", }, { test: /\.md$/i, use: ["html-loader",'markdown-loader'], }, ] }, plugins:[ new webpack.ProgressPlugin(), //打包进度报告 new HtmlWebpackPlugin() ] } 复制代码output (出口)
顾名思义就是打包后导出的文件在哪
好了 基本的了解就到这 现在我们可以从0搭建一个vue项目
从0搭建一个vue项目
题外话
没学webpack之前，就在想vue是怎么打包的，入口文件只有一个main.js,而且单文件里面的js,css是如何获取的，学了之后才发现原来有个vue-loader这个核心，vue文件的编译都是基于这个核心
初始化项目
// 初始化项目 创建一个package.json npm init -y // 安装webpack npm i webpack webpack -D // 创建一个html模板 mkdir public && cd public // 存放开发文件 mkdir src && cd src 复制代码
目录结构如下
├── public # 静态资源 │ └── index.html # html模板 ├── src |—— main.js # webpack入口文件 复制代码
新建webpack.config.js
先配置一些基本的东西
// webpack.config.js const path = require('path'); const webpack =require('webpack'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { mode: 'development', devtool: 'inline-source-map', // 提示哪行错误 entry: './src/main.js', output: { path: __dirname + '/dist', filename: 'static/js/[name].[contenthash].js', clean: true // 打包清除旧文件 }, plugins: [ new webpack.ProgressPlugin(), //打包进度报告 new HtmlWebpackPlugin({ template: './public/index.html' }) ] } 复制代码基本配置写好后，就可以开始在src里面写vue的代码了，这里需要npm i vue安装好需要的开发的工具，然后写好后我们来配置一下解析vue相关的内容，前面提到的重中之重，也就是核心vue-loader
vue-loader
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件,点击这里,基本上看着文档来打包一般没问题
安装
npm i vue-loader vue-template-compiler -D 复制代码
配置
// webpack.config.js const { VueLoaderPlugin } = require('vue-loader'); module.exports ={ // ...其他配置 module: { rules: [ { test: /.vue$/, loader: 'vue-loader' } ] }, plugins: [ //...其他插件 // 请确保引入这个插件！ new VueLoaderPlugin() ] } 复制代码这个基本的配置就已经打包成功了，这里可以通过安装webpack-dev-server开启一个服务器看看效果
webpack-dev-server
创建一个运行脚本，运行npm run dev
"scripts": { "build": "webpack", "dev": "webpack serve --open" }, 复制代码在webpack.config.js添加devServer配置
// webpack.config.js module.exports ={ // ...其他配置 devServer: { static: './dist', // 开启的目标文件 hot: true, // 开启热更新 } } 复制代码就这一段代码是不是很简单,在这里一个基本的打包，构建已经是可以的了，现在我们再来加点东西
加载css csss 文件
首先安装css-loader sass-loader sass
npm i css-loader sass-loader sass -D 复制代码
vue-style-loader是vue-loader里面自带的loader,不需要额外引入
module: { rules: [ // ...其他配置 { test: /\.scss$/, use: ['vue-style-loader', 'css-loader', 'sass-loader'] }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] } ] } 复制代码加载图片
webpack5里面内置了解析图片类型的，所以不需要我们额外安装其他loader
module: { rules: [ // ...其他配置 { test: /\.(png|jpg|gif)$/i, type: 'asset/resource', } ] } 复制代码加载字体
module: { rules: [ // ...其他配置 { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' }, ] } 复制代码使用别名
如果使用@/view/index这种文件路径的需要设置别名
resolve: { alias: { '@': resolve('src') } } 复制代码extensions省略文件路径
通过extensions可以不用写文件后缀
resolve: { // ...其他配置 extensions: ['.js', '.json', '.vue', 'css'] } 复制代码proxy代理
在开发环境中可以通过proxy处理跨域
devServer: { // ...其他配置 proxy: { '/api': { target: 'https://xxx.xxx', changeOrigin: true // 这个必须要写 } }, }, 复制代码优化
美化打包进度条
想要花里胡哨的进度条?? 这里有
npm i progress-bar-webpack-plugin -D 复制代码
const ProgressBarPlugin =require('progress-bar-webpack-plugin') plugins: [ //...其他插件 new ProgressBarPlugin() ] 复制代码打包输出指定文件夹
通过type:'asset/resource'打包到指定文件夹里面，这个相当于file-loader，可以通过generator设置打包路径
module: { rules: [ // ...其他配置 { type:'asset/resource', generator: { filename: 'static/文件夹名称/[hash][ext][query]' } } ] 复制代码es6转es5
安装babel-loader
npm i babel-loader @babel/core @babel/preset-env -D 复制代码
module: { rules: [ // ...其他配置 { test: /\.js$/, exclude:/node_modules/, // 除去 node_modules use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] // 预设 } } }, ] 复制代码完整代码
// webpack.config.js const path = require('path'); const webpack = require('webpack'); const { VueLoaderPlugin } = require('vue-loader'); const HtmlWebpackPlugin = require('html-webpack-plugin'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { mode: 'development', entry: './src/main.js', output: { path: __dirname + '/dist', filename: 'static/js/[name].[contenthash].js', clean: true, }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.scss$/i, use: ['vue-style-loader', 'css-loader','sass-loader'] }, { test: /\.css$/i, use: ['vue-style-loader', 'css-loader'], }, { test: /\.(png|jpg|gif)$/i, type: 'asset/resource', generator: { filename: 'static/img/[hash][ext][query]' }, }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', generator: { filename: 'static/fonts/[hash][ext][query]' }, }, ], }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin(), // new ProgressBarPlugin(), // 花里胡哨的进度条 new webpack.ProgressPlugin(), //打包进度报告 new HtmlWebpackPlugin({ template: './public/index.html' }) ], devServer: { static: './dist', hot: true, proxy: { '/api': { target: 'http://xxx.xxx', changeOrigin: true } }, }, resolve: { extensions: ['.js', '.json', '.vue', 'css'], alias: { '@': resolve('src') } }, } 复制代码写在最后
webpack文档虽大，但其实都是看文档配置参数而已，只要理解这些loader,plugins的作用和配置，就能掌握一些技巧，希望这篇文章大家能对webpack有新的认识
作者：呆呆兽的猫猫
链接：https://juejin.cn/post/7019184005593432101