自己练习时的一些记录 基本配置打包可以。但有一些小问题,,,还没解决。
环境
node v12.18.2
npm v6.14.5
需要安装的插件 估计有的没什么用runtime
npm install webpack webpack-cli style-loader css-loader sass-loader webpack-dev-server vue-loader html-webpack-plugin autoprefixer@8.0.0 postcss-loader vue-template-compiler mini-css-extract-plugin babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime html-loader file-loader url-loader vue-style-loader svg-sprite-loader -D
"vue-template-compiler"和 "vue"版本保持一致 例: “^2.6.12”,
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/runtime": "^7.16.3",
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"autoprefixer": "^8.0.0",
"babel-eslint": "10.1.0",
"babel-loader": "^8.2.3",
"chalk": "4.1.0",
"clean-webpack-plugin": "^4.0.0",
"connect": "3.6.6",
"css-loader": "^6.5.1",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"file-loader": "^6.2.0",
"html-loader": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"lint-staged": "10.5.3",
"mini-css-extract-plugin": "^2.4.5",
"postcss-loader": "^6.2.0",
"runjs": "4.4.2",
"sass": "1.32.0",
"sass-loader": "^10.2.0",
"script-ext-html-webpack-plugin": "2.1.5",
"style-loader": "^3.3.1",
"svg-sprite-loader": "5.1.1",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.8",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
webpack.config.js 配置内容
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require("webpack");
module.exports = (env) => {
//使用回调函数。或者直接返回对象。
console.log('env: ', env);
console.log('process: ', process);
return {
mode: 'development',
devServer: {
open: true,
port: 8888,
static: path.resolve(__dirname, 'dist'), //网站的根目录为 根目录/dist,如果配置不对,会报Cannot GET /错误
proxy: {
'/prod-api': {
target: 'http://192.168.1.152:8081',
changeOrigin: true,
pathRewrite: {
'/prod-api': ''
}
}
},
},
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new MiniCssPlugin({
filename: 'css/bundle.css'
}),
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
Path: ['path'],
process: 'process/browser',
})
],
module: {
rules:
[
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_module/ },
{ test: /\.css$/, use: [MiniCssPlugin.loader, 'css-loader', 'postcss-loader'] },
{
test: /\.scss$/,
use: [
{
loader: MiniCssPlugin.loader,
options: { publicPath: '..' }
},
'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.svg$/,
// use: [
// { loader: 'file-loader', }
// ],
// type: 'asset/inline',//转换为base64.在线地址,不会被打包出来
type: 'asset/resource',//静态资源,会被打包
// type: 'asset'//自动选择 默认大于8k 就会创建资源 可自己调整
generator: {
filename: './svg/[hash].[ext]'
},
},
{
test: /\.jpg$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 * 1024 //4M
}
}
}, {
test: /\.gif$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 * 1024 //4M
}
}
},
{
test: /\.png$/,
type: 'asset/resource',
//打包后的静态资源位置 及 文件名
generator: {
filename: './image/[hash].[ext]'
},
parser: {
dataUrlCondition: {
maxSize: 1024 * 1024
}
}
},
{ test: /\.html$/, loader: 'html-loader' },
]
},
resolve: {
// https://github.com/babel/babel/issues/8462
// https://blog.csdn.net/qq_39807732/article/details/110089893
// 如果确认需要node polyfill,设置resolve.fallback安装对应的依赖
//webpack5 关闭node功能 要自己导入
fallback: {
crypto: require.resolve('crypto-browserify'),
path: require.resolve('path-browserify'),
url: require.resolve('url'),
buffer: require.resolve('buffer/'),
util: require.resolve('util/'),
stream: require.resolve('stream-browserify/'),
vm: require.resolve('vm-browserify'),
process: require.resolve('process')
},
alias: {
crypto: false,
'@': path.resolve(__dirname, './src')
},
extensions: ['.json', '.js', '.vue']
},
//关闭性能提示
performance: {
hints: false
}
}
}
webpack.config.js 不足说明
我这边还没有进行。.env的配置 只配置了简单的node方法。我也不太懂。。
1. Webpack5 移除了 Node.js Polyfill,将会导致一些包变得不可用 node中的一些方法不能直接使用,需要手动导入。
2. webpack5好像也不能自动识别项目本地的 环境配置文件 .env文件 我这边还没有进行。.env的配置
babel.config.js 配置
module.exports = {
presets: [
'@babel/preset-env',
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
'@vue/cli-plugin-babel/preset'
],
'env': {
'development': {
// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
'plugins': ['dynamic-import-node']
}
}
}
postcss.config.js 配置 自动添加样式前缀
module.exports = {
plugins: [
require('autoprefixer')
]
}
package.json 配置 最后添加
"browserslist": [
"> 1%",
"last 2 versions"
],
"browser": {
"crypto": false
}