【Webpack】webpack配置文件（webpack.config.js）的使用1

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

webpack配置文件（webpack.config.js）

通过配置文件向外暴露一个配置对象

const path=require('path')
module.exports={
//入口,要打包的文件
//要打包的文件不存在，会报错
//约定，默认的打包文件入口是src->index.js
 entry:path.join(__dirname,'./src/main.js'),
 output:{
	//输出文件的相关配置
	//默认打包文件出口是dist->main.js
  path:path.join(__dirname,'./dist'),//打包输出目录
  filename:'main.js'//输出文件的名称
  //输出目录必须存在，文件名称可以随便取
  
 },
 //设置模式
  mode:'development'//development production
  //当属性值为production时，会自动压缩打包的文件
}

作用

用配置文件代替了命令

在打包时直接输入webpack，既可

webpack

当命令后面没有路径时，会自动查找webpack.config.js中的配置

webpack处理第三方文件的配置

1.webpack处理第三方文件的过程

当发现不是js文件，会先去配置文件找有没有对应的第三方loader规则

如果找到对应的规则就会调用相应的loader处理这种文件，如果没有，就会报错

调用loader的顺序是从后往前

当最后一个loader处理完毕后，会将结果直接交给webpack进行打包

2.处理css的第三方loader

1. 导入css 在导入页面的js文件中

import './css/index.css'

导入的样式，默认全局生效

2. 安装第三方loader加载器 webpack不支持打包css文件，只能打包js文件

npm i style-loader css-loader -D

3.配置匹配和处理规则 打开webpack.config.js，新增一个配置节点module,增加一个rules属性（存放所有第三方文件的匹配和处理规则）

module:{
 rules:[
  {test:/\.css$/  
//匹配css结尾的文件
,use:['style-loader','css-loader']}
//处理css文件的第三方loader
 ]
}

参数： modules： 这是将样式类名修改为一个可变的类名，每个引用都会使用不同的类名，这样就能实现模块化

css-loader后面跟modules可以启用样式模块化。

3.处理less的第三方loader

能够处理.less文件的loader

1. 安装命令 安装loader

npm i less-loader -D

安装less（less-loader内部依赖）

npm i less -D

2. 配置匹配和处理规则

打开webpack.config.js，新增一个配置节点module,增加一个rules属性（存放所有第三方文件的匹配和处理规则）

module:{
 rules:[
  {test:/\.less$/,
    use:['style-loader','css-loader','less-loader']}
]
}

4.处理scss的第三方loader

1. 安装scss-loader

npm i sass-loader -D（内部依赖node-sass）

cnpm i node-sass

2. 配置匹配规则

{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

5.处理.vue文件

1. 安装相应loader

cnpm i vue-loader vue-template-compiler -D

2. 新增匹配规则 在webpack.config.js文件中

module.exports={
	module:{
        //匹配规则
        rules:[
            { test: /\.vue$/, use: "vue-loader" }
        ]
    }
}

3. 配置插件

module.exports={
	 //插件
    plugins:[
        new VueLoaderPlugin()
    ]
}