项目目录
先看一下目录,是不是似曾相识?
├── dist
├── public
│ └── index.html
├── src
│ ├── assets
│ │ ├── css
│ │ └── img
│ ├── components
│ ├── plugins
│ │ ├── antdv.js
│ │ └── Dot.js
│ ├── router
│ │ └── index.js
│ ├── store
│ │ └── index.js
│ ├── utils
│ │ ├── index.js
│ │ ├── RegExp.js
│ │ └── request.js
│ ├── views
│ │ ├── Home.vue
│ │ └── Login.vue
│ ├── App.vue
│ └── main.js
├── .browserslistrc
├── babel.config.js
├── package-lock.json
├── package.json
├── webpack.config.js
└── yarn.lock
前言
众所周知,vue-cli
实际上就是基于 webpack
封装的一个工具,它默认保留了一些常用的配置,我们甚至不需要对于 webpack
有多深的了解都能很好的开发vue项目。但是使用 webpack
从0配置一个 vue项目还是一件很有意思的事。
首先声明本篇不会教你写 webpack
的 hello world,官方文档 就是最好的入门教程。我也是在看完官方文档后在网上没有找到一篇自己想要的配置,只好自己写一篇,希望能给到看标题进来的人一些帮助。
它具有哪些功能
介绍一些本篇配置具有的功能和一些概念,有助于对于webpack有一个整体性的认知。
模块热替换(类似于热更新、热部署,它可以无刷新更新页面👍)
多进程并行压缩js(显著提高打包的速度、显著减小文件大小👍)
提取样式为
.css
文件(默认方式为将 style字符串 插入到页面中,提取为单文件可以显著节省加载时间👍)配置 babel,全兼容 IE9及以上(需求再无理也能克服👍后面会放一个网址作为预览,部分样式就没考虑IE9了😅)
配置部分js使用
cdn
外部加载(显著提高首屏加载速度、显著减少打包文件大小👍)tree shaking (筛除没有用到的 ES模块,显著减少打包文件大小👍)
整合 ant-design-vue 按需加载、主题色配置(显著减少打包文件大小👍)
以上几乎是重要功能的全部了,下面直接贴配置。
webpack.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 使用解构引入,webpack 中文文档教程该块代码已过时
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const Webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 多进程并行压缩js插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const WebpackConfig = {
// 入口js
entry: {
app: './src/main.js',
},
output: {
// 输出路径 - 不存在即创建文件夹
path: path.resolve(__dirname, 'dist'),
// 输出文件名称
filename: '[name].js',
// 打包后资源的地址前缀 - 目前只有在 webpack-dev-middleware 中使用
publicPath: './'
},
module: {
rules: [
{
test: /\.(css|less)$/,
// 提取 css 为 .css文件 引入
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true
}
},
}
],
},
{
// 加载图片
test: /\.(png|jpg)$/, use: ['file-loader']
},
{
// 加载字体
test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']
},
{
// 加载vue文件
test: /\.vue$/, use: ['vue-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
],
},
plugins: [
// 优化 moment.js
new Webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 压缩js插件
new ParallelUglifyPlugin({
uglifyJS: {},
test: /.js$/g,
include: [],
exclude: [],
cacheDir: '',
workerCount: '',
sourceMap: false
}),
new VueLoaderPlugin(),
// 更改您的配置文件以告诉 CleanWebpackPlugin 我们不想在监视触发增量构建后删除 index.html 文件,我们可以使用 cleanStaleWebpackAssets 选项来执行此操作:
new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
// 提取 css
new MiniCssExtractPlugin(),
// 生成 html 文件,并将生成的所有 bundle文件 自动引入到 html中
new HtmlWebpackPlugin({
// 初始模板
template: './public/index.html',
// cdn不是HtmlWebpackPlugin默认配置, 但可在index.html中 以 'htmlWebpackPlugin.options.cdn.js' 读取数据
cdn: {
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js'
]
}
}),
// 当开启 HMR 的时候使用该插件会显示模块的相对路径,建议用于开发环境。
new Webpack.NamedModulesPlugin(),
// 模块热替换插件
new Webpack.HotModuleReplacementPlugin()
],
resolve: {
// 配置路径别名
alias: {
'@': path.resolve(__dirname, 'src')
}
},
// 用于开发环境的错误调试定位
devtool: '(none)',
devServer: {
// 告诉服务器从哪里提供内容
contentBase: './public',
// 在浏览器中打开
open: true,
// 端口号
port: 8080,
// 启用 webpack 的模块热替换(ps:不刷新页面更新代码)
hot: true,
// 假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/",所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。
publicPath: '/'
},
// 以下js使用cdn外部引入
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex'
}
}
又贴了这么长的代码😓,以上便是我尝试使用 webpack 1:1 还原 vue-cli 项目的全部了,当然 1:1 是有些吹了😋。我建议初学webpack的同学将 官方例子 全部敲一遍,相信我官方例子绝对通俗易学。耐心啃完官方教程然后再来配置一个vue项目应该就非常得心应手了,本篇是一篇 使用webpack起手配置vue项目 博文。或许在自己的实践中,有人会遇到不同的坑,填坑之路绝对是充满乐趣的。学会一个东西都是从踩坑到熟练的过程,加油💪。
源码
可在 该地址 直接拉取源码,以供参考。