webpack基础配置

徐__L

已于 2023-08-04 09:46:50 修改

阅读量103

点赞数

文章标签： webpack 前端

于 2023-06-16 18:00:54 首次发布

本文链接：https://blog.csdn.net/xuyanl/article/details/121293153

版权

安装

	npm i webpack-cli webpack webpack-dev-server -D

配置

一般是配合vue或者react使用，根目录下新建webpack.config.js，也可以使用.ts后缀，但是需要安装下面这些包

	npm install --save-dev typescript ts-node @types/node @types/webpack
	// 如果使用版本低于 v4.7.0 的 webpack-dev-server，还需要安装以下依赖
	npm install --save-dev @types/webpack-dev-server

webpack.config.js的基本内容，可以根据实际情况来写

// webpack.config.js

const path = require("path");
const devMode = process.env.NODE_ENV !== "production";
// js文件也可以使用ts的类型注释
/** @type {import('webpack').Configuration} */

const config = {
    entry: path.resolve(__dirname, '../src/index'),  // 入口文件，这里用了tsx文件
    cache: { type: 'filesystem' },// 开发环境缓存文件 提升编译速度
    output: {
		path: path.resolve(__dirname, '../dist'),
		filename: '[id][chunkhash].js',
		assetModuleFilename: 'assets/[hash][ext]',
		publicPath: '/', // 资源目录
		clean: true, // 在生成文件之前清空 output 目录
	},
    // 防止某些包被打包，使用cdn的方式引入，具体看webpack官网文档
    externalsType: 'script',
    externals: {
        jquery: [
            'http://code.jquery.com/jquery-2.1.1.min.js',
            'jQuery'
        ],
    },
    // optimization 进行打包优化，大文件拆分，提取公共文件，具体看webpack官网文档
    optimization: {
        // chunkIds: 'named',
        // splitChunks: {
        //     minChunks: 1,
        //     maxInitialRequests: 100,
        //     cacheGroups: {
        //         vendors: {
        //             chunks: 'all',
        //             test: /[\\/]node_modules[\\/]/,
        //             priority: -10,
        //             maxInitialRequests: 100,
        //             reuseExistingChunk: true
        //         }
        //     }
        // }
    },
    resolve: {
        alias: {
            @: "./src", // 配置路径别名，也可以配置文件别名 
            _:['./src','./common'] //webpack5还支持[string] 配置 
        },
        extensions: ['.ts', '.tsx', '...']
    },
    // devServer 需要安装webpack-dev-server
    devServer:{
    	// historyApiFallback:true //当使用HTML5历史API时，可能必须使用index.html页面来代替任何404响应
    	host: '0.0.0.0',//指定要使用的 host,如果你想让你的服务器可以被外部访问，可以像这样指定
    	open: true,//服务器已经启动后打开浏览器
    	port: 8080,//指定打开的端口号，要想自动使用一个可用端口请使用 port: 'auto'
    	proxy:{ // 开发环境接口配置代理，具体看webpack官网文档
    	} 
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [devMode ? "style-loader" : MiniCssExtractPlugin.loader, , "css-loader"],// 使用loader来编译css文件，loader的执行顺序是从右往左，这里是先 css-loader，然后style-loader
                //使用less或者scss可以安装相应的loader
            },
            {
                test: /\.less$/,
                use: [devMode ? "style-loader" : MiniCssExtractPlugin.loader, {
                    loader: "css-loader"
                }, 'less-loader'],
               
            },
            {
                test: /\.m?(js|ts|tsx)$/, // 匹配js ts tsx 文件
                exclude: /(node_modules)/,//排除node_modules下的文件
                use: {
                    loader: "babel-loader", // 使用babel编译，可以直接添加 options 选项，也可以在根目录新建babel.config.json文件
                    // options: {
                    //     presets: [
                    //         ["@babel/preset-env",
                    //         ],
                    //         "@babel/preset-react",
                    //         "@babel/preset-typescript",
                    //       ]
                    // },
                },
            },
            {
		       test: /\.(png|jpg|gif)$/i,//资源模块处理，不需要用 file-loader等去处理了，https://webpack.docschina.org/guides/asset-modules/#root
		       type: 'asset/resource'
		     }
        ],
	     
    },
    // webpack插件
    plugins: [
    	// 需要按装html-webpack-plugin包
        new HtmlWebpackPlugin({
            template: 'src/index.html' // src目录下需要有这个文件
        }),
        // 打包分析工具 webpack-bundle-analyzer
        // new BundleAnalyzerPlugin({
        //     generateStatsFile: true,
        //     analyzerPort: 'auto',
        //     openAnalyzer: false
        // })
    ]
};

module.exports = config;

注意： 这样配置的话，使用ES6以后的新语法可能会报错，还需要Babel编译，更多Babel选项可以参考这里。

	npm install @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript -D

babel.config.json配置（或者在webpack.config里面配置）

{
  
    "presets": [
      	[
            "@babel/preset-env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                }
            }
       ],
      "@babel/preset-react",
      // ["@babel/preset-react", { "runtime": "automatic" }], // react17以上版本要开启{ "runtime": "automatic" }
      "@babel/preset-typescript"
    ],
  ]
  
}

现在一个基本的webpack配置就准备好了，常用的webpack插件可以参考下

DefinePlugin(webpack内部插件，不需要单独安装)
允许在编译时将代码中的变量替换为其他值或表达式。这在需要根据开发模式与生产模式进行不同的操作时，非常有用。例如，如果想在开发构建中进行日志记录，而不在生产构建中进行，就可以定义一个全局常量去判断是否记录日志。这就是 DefinePlugin 的发光之处，设置好它，就可以忘掉开发环境和生产环境的构建规则。
style-resources-loader 导入公共样式
style样式资源处理器，在style资源中注入内容，导入css / sass / scss / less / stylus这些内容
主要作用：导入一些公共的样式文件，比如：variables / mixins / functions，避免在每个样式文件中手动的@import导入。sass-resources-loader也是一样的功能，不仅限于scss文件，less、css都可以
compression-webpack-plugin 进行打包代码压缩Gzip
speed-measure-webpack-plugin 插件进行构建速度分析，可以看到各个 loader、plugin 的构建时长，后续可针对耗时 loader、plugin 进行优化
@pmmmwh/react-refresh-webpack-plugin这个包可以用来热更新react组件，看个人需求是否需要添加
thread-loader 开启多进程打包，减少打包时间