webpack-config webpack

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 vue@2.6 vue-loader@15 vue-template-compiler@2.6

配置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"},

【webpack-config】路径处理模块：

const path = require('path'); const appDir = process.cwd(); console.log(appDir,'<----- appDir'); module.exports =(relativePath) => path.resolve(appDir, relativePath);

根据参数区分打包环境webpack.common.js：

// webpack.config.jsconst 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(), ] }