webpack-config

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-loader @babel/core @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: ['babel-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"

  },

路径处理模块：

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(),
   ]
}