webpack-config
一、config-path
1.config-output-devserver-publicPath
简述：
/**
* output:
* - publicPath: index.html内部的引用路径
* - 域名 + (缺'/'时，浏览器会自动添加)publicPath + filename 本地访问时（不使用dev-server），不用加域名
* - 结论:在本地访问，写''或相对路径，使用dev-server使用''或以'/'开头的绝对路径
*
* devServer:
* static:
* - publicPath(之前在devServer下): 指定本地服务所在的目录(将打包的结果放在指定目录之下)
* 建议将output.publicPath 与 devServer.publicPath 保持一致
* - directory(之前在devServer下,contentPath): 我们打包之后的资源，如果依赖其它资源，就告知去哪里找
* - watch:true 检测资源变化，自动刷新
*/配置：
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/lg', // 默认值为' '
},
target: 'web',
devServer: {
hot: true,
static: {
publicPath: '/lg',
directory:path.resolve(__dirname,'public'),
watch: true
},
}
}2.devServer常用配置
devServer: {
compress: true, // 将资源压缩之后，再返回给客户端展示
port: 5505, // 端口
hot: 'only', // 当某个模块错误被纠正时，只会更新单个模块，true时会更新所有模块
open:false, // 是否自动打开浏览器
historyApiFallback: true , // 当使用前端路由请求后端时，如果路由不存在，应该使用前端路由匹配
},二、proxy代理服务
解决cros跨域请求：
// 常用proxy配置
devServer: {
...
proxy: {
// 匹配'/api'开头的请求，代理到localhost:5500
'/api': {
target: 'https://jsonplaceholder.typicode.com',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
}
}
},三、resolve模块解析规则
module.exports = {
...
resolve:{
extensions:['.js','.jsx','.json','.ts','.vue'],
},
}
// 引入模块时，可简写
import About from './components/About'; // About.jsx配置路径别名：
resolve:{
...
alias:{
'@':path.resolve(__dirname,'src'),
}
},
// 使用别名简化导入模块是的书写路径
import Home from '@/components/Home';四、dev-tools配置
a.source-map
source-map --> 在调试的时候可以定位到源代码的信息
该模式，会生成.map文件，用于浏览器定位源代码配置：
mode:'development', // development 会自动开启devtool: 'eval' eval-source-map
// eval-source-map 与 inline-source-map 不同的是，它不会生成一个单独的文件，而是内联到打包后的文件中(dataUrl)
// cheap-source-map 与 cheap-module-source-map
devtool:'source-map'五、编译TS
a.ts-loader编译ts
只能处理编译ts文件。不能处理一下polyfill一些较新的语法，且可以在编译阶段就发现ts语法错误安装依赖：
yarn add -D ts-loader typescript配置loader处理ts文件：
{
test: /\.ts$/,
use: ['ts-loader'],
}b.使用babel-loader编译ts
完成对polyfill的支持，ts的语法错误，在编译阶段不能发现，在运行阶段才能发现安装依赖：
yarn add core-js regenerator-runtime // 完成polyfill功能的依赖
yarn add @babel/preset-typescript //完成ts文件的编译配置：
// main.ts中引入 polyfill依赖
import 'core-js/stable';
import 'regenerator-runtime/runtime';
// webpack.config.js中配置babel-loader
{
test: /\.ts$/,
exclude: /node_modules/,
use: ['ts-loader'],
}
// 配置babel-loader参数，完成polyfill功能
module.exports = {
presets: [
['@babel/preset-env',{
useBuiltIns: 'usage',
corejs: 3,
}],
['@babel/preset-typescript']
]
}c.综合
先使用tsc 完成编译阶段的语法检错，再使用babel-loader的编译与polyfill功能
综合性命令完成功能：
"ts_build":"npm run ck && webpack",
"ck":"tsc --noEmit"六、编译vue
安装依赖：
yarn add -D [email protected] vue-loader@15 [email protected]配置loader:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
...
module: {
rules: [
...
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
esModule: false
}
},
'postcss-loader',
'less-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
...
new VueLoaderPlugin()
]
}七、打包环境的区分
分写webpack配置文件
-config
-webpack.common.js
-webpack.dev.js
-webpack.prod.js启动命令传参：
"scripts": {
"build": "webpack",
"serve": "webpack serve",
"build2": "webpack --config ./config/webpack.common.js --env production",
"serve2": "webpack serve --config ./config/webpack.common.js --env development"
},路径处理模块：
const path = require('path');
const appDir = process.cwd();
console.log(appDir,'<----- appDir');
module.exports = (relativePath) => path.resolve(appDir, relativePath);
根据参数区分打包环境webpack.common.js：
// webpack.config.js
const resolvePath = require('./paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge'); // 合并webpack配置
// 定义对象保存 base 配置
const commonConfig = {
entry: './src/main.js', // 反而没有报错（相对路径）
context: resolvePath('./'), // 当前次打包的上下文 默认是所写的配置文件的路径上下文
output: {
path: resolvePath('./dist'),
filename: 'bundle.js',
},
resolve: {
alias: {
'@': resolvePath('./src')
},
extensions: ['.js', '.json', '.ts', '.jsx', '.vue']
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
esModule: false
}
},
'postcss-loader',
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
type: 'asset',
generator: {
filename: 'imgs/[name].[hash:4][ext]',
},
parser: {
dataUrlCondition: {
maxSize: 10 * 1024
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)$/,
type: 'asset/resource', // 图标字体文件，只需要拷贝到dist目录即可
generator: {
filename: 'font/[name].[hash:3][ext]'
}
},
{
test: /\.jsx?$/,
exclude: /node_modules/, // 排除掉node_modules目录下的js文件，避免重复填充处理
use: ['babel-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'babel-webpack-plugin',
template: './public/index.html',
}),
]
}
module.exports = (env) => {
const isProduction = env.production;
console.log(new Boolean(isProduction), '<----- isProduction');
const config = merge(commonConfig, isProduction ? require('./webpack.prod') : require('./webpack.dev'));
return config;
}
生产环境webpack.prod.js(这里会报错，再处理ts的babel-loader中，配置了ts模块刷新):
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'production',
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: 'public',
// to:'dist', 默认到output目录下
globOptions: {
ignore: ['**/index.html'] // 忽略掉该目录下的index.html文件
}
}
]
}),
]
}开发环境webpack.dev.js:
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
module.exports = {
mode: 'development',
devtool: 'source-map',
target: 'web', // 开发阶段屏蔽.browserslistrc
devServer: {
compress: true, // 将资源压缩之后，再返回给客户端展示
port: 5505, // 端口
hot: 'only', // 当某个模块错误被纠正时，只会更新单个模块，true时会更新所有模块
open: false, // 是否自动打开浏览器
historyApiFallback: true, // 当使用前端路由请求后端时，如果路由不存在，应该使用前端路由匹配
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'babel-webpack-plugin',
template: './public/index.html',
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'public',
// to:'dist', 默认到output目录下
globOptions: {
ignore: ['**/index.html'] // 忽略掉该目录下的index.html文件
}
}
]
}),
new ReactRefreshWebpackPlugin(),
]
}