Webpack配置篇

275 阅读2分钟

webpack是一个javascript应用程序的模块打包工具,它会从入口模块出发,识别出源码中的模块化导入语句,递归地找出入口文件的所有依赖,将入口和其所有的依赖打包到一个独立的文件中。

默认配置

const path = require("path")
module.exports = {
    entry: "./src/index.js",  //入口
    output: {
        path: path.resolve(__dirname, "./dist")
        filename: "main.js"  //必须是绝对路径
    }
}

webpack配置

  • webpack4支持零配置使用,但是稍微复杂的场景就需要额外的配置。

  • 默认配置文件为webpack.config.js,可以通过--config 文件名.js来指定webpack使⽤哪个配置⽂件来执⾏构建。

  • webpack.config.js配置基础结构

module.exports = {
    entry: "./src/index.js", //打包入口文件
    output: "./dist",  //输出结构
    mode: "production"  //打包环境
    module: {
        rules: [
            {
                test: "/\.css$/"
                use: [style-loader,css-loader]  //从右到左,从下到上            }
        ]
    },
    plugins: [new HtmlWebpackPlugin()]  //配置插件
}
entry

入口文件,指示webpack应该从哪个模块开始,去构建其内部依赖图

//单入口
entry: {
    main: "./src/index.js"   //相当于entry: "./src/index.js"
}
// 多入口
entry: {
    index: "./src/index.js",
    login: "./src/login.js"
}
output

告诉webpcak在哪里输出它所创建的bundles,以及如何命名这些文件

//单入口
outpath: {
    filename: 'app.js', //输出的文件名
    path: path.resolve(__dirname, 'dist') //输出文件到磁盘的目录,必须为绝对路径
}

//多入口
outpath: {
    filename: '[name][hash:8].js', //使用占位符和hash值
    path: path.resolve(__dirname, 'dist')
}
  • hash: 与整个项目的构建相关,只要项目中有一个文件发生了改变,所有文件的hash值都会改变,那么整个项目的缓存就会失效
  • chunkhash:根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。但是这样又有一个问题,因为我们是将样式作为模块import到JavaScript文件中的,所以它们的chunkhash是一致的,只要我们改变了其中一个文件的内容,另一个文件的hash也会同时改变。
  • contenthash:表示由文件内容产生的hash值,内容不同产生的contenthash值也不一样。在项目中,通常做法是把项目中css都抽离出对应的css文件来加以引用
mode

用来指定当前的构建环境

  • production
  • development
  • none

loader

webpack只支持js和json类型的模块,loader的存在将其他类型的模块转换成webpack能够处理的模块。

在webpack里,一切皆模块,一个模块对应一个文件,webpack会从配置的entry开始递归找出所有依赖的模块,当webpack处理到不认识的模块时,需要在webpack中的module里进行配置,检测到什么格式的模块就使用什么loader来处理,一个loader只处理一件事情

  • css-loader: 将css模块的内容加到js模块中去

  • style-loader: 从js中提取出css的loader,在html中创建style标签,把css的内容放入style中去

  • postcss-loader: css后处理器,自动添加浏览器前缀,需要在css-loader之前使用

module: {
	rules: [
    	{
        	test: '/\.css$/',
        	use: ['style-loader', 'css-loader']  //执行顺序是从右往左,从下往上
        },
        {
        	test: '/\.less$/',
        	use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] 
        }
    ]
}
  1. 开启css模块化
	module: {
    	rules: [
        	{
            	test: '/\.css$/',
                use: [
                	'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true //开启css模块化,默认不开启
                        }
                    }
                ]
            }
        ]
    }
  1. 使用postcss-loader时,需要单独配置。我们可以在根目录创建一个postcss.config.js文件
	const autoprefixer = require('autoprefixer')
    module.exports = {
    	plugins: [
        	autoprefixer({
            	//重写浏览器列表    兼容最近的两个版本  全球浏览器的市场份额大于1%的浏览器
            	overrideBrowserslist: ['last 2 versions', '>1%']
            })
        ]
    }
  • file-loader: 处理图片、文件的loader
  • url-loader: file-loader的加强版,拥有file-loader的全部功能,同时拥有limit配置,可以把图片处理成base64。推荐使用
	module: {
    	rules: [
        	{
            	test: '/\.(png|jpe?g|gif|svg)$/',
                use: [
                	{
                      loader: 'url-loader',
                      options: {
                      	name: '[name][hash:8].[ext]',
                        outputPath: 'images/', //图片放到dist目录下的images目录
                        limit: 2*1024  //小于2kb才会转换成base64
                      }
                  }
                ]
            }
        ]
    }
plugins
  • 作⽤于webpack打包整个过程
  • webpack的打包过程是有(⽣命周期概念)钩⼦

plugin 可以在webpack运⾏到某个阶段的时候,帮你做⼀些事情,类似于⽣命周期的概念。在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。

  • html-webpack-plugin: 它会在打包结束后,自动生成一个html文件,并把打包生成的js模块引入到该html中
  • clean-webpack-plugin: 清除目录文件