bash:
npm install -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-syntax-dynamic-import babel-loader style-loader css-loader less less-loader url-loader file-loader rimraf dotenv dotenv-expand html-webpack-plugin webpack-manifest-plugin mini-css-extract-plugin css-minimizer-webpack-plugin terser-webpack-plugin vue-loader@15 vue-template-compiler@2 && npm install vue@2 vue-router@3 vuex@3 axios js-cookie decimal.js
- 注意 vue-template-compiler和vue的版本必须保持一致
- vue-loader需使用15版本,而且15版本在webpack配置中需要加上VueLoaderPlugin插件
babel.config.js:
module.exports = {
"presets": [
"@babel/preset-env"
],
// 注意:decorators插件要位于properties插件之前
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import"
]
}
jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
// 前端项目配合webpack的resolve的alias字段,使别名路径可以自动跳转(具体路径需二者对照)
"@/*": ["./src/*"]
}
}
}
.gitignore:
node_modules
dist
.env
webpack.dev.js:
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
// 开发环境,不配置任何压缩,任何hash,不提取任何css文件
module.exports = {
entry: {
entry: "./src/index.js",
},
mode: "development",
devtool: "source-map",
devServer: {
port: 3000,
hot: true,
historyApiFallback: true,
},
optimization: {
splitChunks: {
chunks: "all",
},
},
resolve: {
extensions: [".js", ".vue", ".ts"],
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
module: {
rules: [
{
test: /.vue$/,
use: {
loader: "vue-loader",
},
include: [path.resolve(__dirname, "./src")],
},
{
test: /.js$/,
use: {
loader: "babel-loader",
},
include: [path.resolve(__dirname, "./src")],
},
{
test: /.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
// 只对文件名后缀是module的文件,进行模块化处理
auto: /\.module\.\w+$/i,
},
},
},
],
include: [
path.resolve(__dirname, "./src"),
// 如果使用了elementui框架,记得处理它的css文件
path.resolve(
__dirname,
"./node_modules/element-ui/lib/theme-chalk/index.css"
),
],
},
{
test: /.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
// 只对文件名后缀是module的文件,进行模块化处理
modules: {
auto: /\.module\.\w+$/i,
},
},
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
include: [path.resolve(__dirname, "./src")],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
name: "./images/[name]_[hash].[ext]",
limit: 8192,
},
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new HTMLWebpackPlugin({
title: "Title",
template: path.resolve(__dirname, "./public/index.html"),
}),
],
output: {
filename: "[name].bundle.js",
chunkFilename: "chunk.[name].js",
path: path.resolve(__dirname, "dist"),
publicPath: "/", // 写好此路径,防止(开发or生产)服务器找不到打包出来的文件,“/”代表web服务器的根目录
},
};
webpack.prod.js:
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
// 提取各个css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 压缩css文件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 压缩js文件
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
entry: {
entry: "./src/index.js",
},
mode: "production",
devServer: {
port: 3000,
hot: true,
historyApiFallback: true,
},
optimization: {
// 需要同时配置css压缩和js压缩
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
// 去除所有的console.log
pure_funcs: ["console.log"],
},
},
}),
new CssMinimizerPlugin(),
],
splitChunks: {
chunks: "all",
},
},
resolve: {
extensions: [".js", ".vue", ".ts"],
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
module: {
rules: [
{
test: /.vue$/,
use: {
loader: "vue-loader",
},
include: [path.resolve(__dirname, "./src")],
},
{
test: /.js$/,
use: {
loader: "babel-loader",
},
include: [path.resolve(__dirname, "./src")],
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
// 只对文件名后缀是module的文件,进行模块化处理
auto: /\.module\.\w+$/i,
},
},
},
],
include: [
path.resolve(__dirname, "./src"),
// 如果使用了elementui框架,记得处理它的css文件
path.resolve(
__dirname,
"./node_modules/element-ui/lib/theme-chalk/index.css"
),
],
},
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
// 只对文件名后缀是module的文件,进行模块化处理
modules: {
auto: /\.module\.\w+$/i,
},
},
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
include: [path.resolve(__dirname, "./src")],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
name: "./images/[name]_[hash].[ext]",
limit: 8192,
},
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new HTMLWebpackPlugin({
title: "Title",
template: path.resolve(__dirname, "./public/index.html"),
}),
new MiniCssExtractPlugin({
// 使用contenthash
filename: "[name].[contenthash:8].css",
chunkFilename: "[id].[contenthash:8].css",
}),
],
output: {
// 使用chunkhash
filename: "[name].[chunkhash:8].bundle.js",
chunkFilename: "chunk.[name].[chunkhash:8].js",
path: path.resolve(__dirname, "dist"),
publicPath: "/", // 写好此路径,防止(开发or生产)服务器找不到打包出来的文件,“/”代表web服务器的根目录
},
};