webpack学习：概念及文件结构属性配置

本文内容如下

webpack中的概念和文件结构

如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案

---

概念

loader

转换器，解决浏览器不认识的文件问题，浏览器不认识什么就配置什么，如css，图片，react，typescript等等

如何使用：1.安装，2.无需导入，直接配置规则使用

简单例子：

正则表达式匹配到以 .css 结尾的文件，就用 css-loader 处理

yarn add css-loader style-loader


module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
	    rules:[
	        {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
	    ]
	}
}

---

plugin

插件，可以在webpack运行到某个阶段的时候，帮做一些事情，类似于生命周期的概念

如何使用：1.安装，2.导入，3.配置

简单例子：

在打包编译时，自动将js文件引入html模板，并修改title

yarn add html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',  //指定html模板，以该模板注入打包模块
            title: '代码研习',          //修改html标题，需要配置模板语法<title><%= htmlWebpackPlugin.options.title %></title>
        })
    ]
}

---

文件结构及属性

webpack的配置是一个对象，而这个对象都有哪些属性？都是做什么用的？

配置对象

module.exports = {
   mode:'development',
   devtool: 'cheap-module-source-map',
   target: 'web',
   entry: './src/index.js',
   output:{},
   resolve：{},
   module:{ relus:[] },
   plugins:[],
   devServer:{} 
   optimization: {}
   externals: {},
}

更多对象配置属性查看官网

---

属性及作用，参数

mode：

模式，用于区别是开发或生产模式，以便个性化配置，因为有些配置是生产模式用的，有些是开发模式用的

类型：string
参数：development | production

---

entry

入口文件，告诉webpack，从哪个文件开始打包？

类型：string | array | object



多种用法：
module.exports = {
    //单入口
    entry:'./src/index.js',
    
    //array
    entry:['./src/index.js', './src/about.js']
    
    //多入口
    entry:{
    	index:'./src/index.js',
    	about:'./src/about.js'
	}
    
    //混合用法
    entry:{
    	index:['./src/index.js', './src/count.js'],
    	about:'./src/about.js'
	 }
}

---

output

出口文件，告诉webpack，打包后的资源，放到哪里？叫什么名字？

类型：object



const { resolve } = require('path')

module.exports = {
    entry:'./xx',
    output:{
        //配置打包后的文件名称
        filename:'js/[name].js'
        //filename:'index.[contentHash:8].js' //哈希写法
        
        //输出文件目录
        path:resolve(__dirname,'build')
    	
        //所有输出资源的公共路径前缀：
        publicPath: 'https://cdn.baidu.com/'，
        //html的自动引入帮加上公共路径
        <script src="https://cdn.baidu.com/js/main.js"></script>
          
        //非入口chunk的名称
        //entry指定的文件叫chunk：单入口chunk，多入口chunk
        //非入口chunk：1.通过inport引入的文件，2.通过optimization分割的文件
        //默认通过id命名，避免和main相同
        chunkFilename: 'js/[name]_chunk.js'
        
        //整个库向外暴露的变量名：通常不用的
        library:'[name]',
        
        //变量名添加到哪个上？ window/global
        libraryTarget:'window'， //变量名添加到哪个上？ 适应browser
    }
}


//非入口chunk
import('./add.js').then(({dufault:add}) => {
    console.log(add(1,2))
})

---

module

模块，告诉webpack，遇到什么规则，使用什么样的loader处理

类型：object

//对象属性：
module = {
	relus: []
}


具体：
module: {
	relus: [
		{
             //正则匹配规则
             test:/\.js$/,
            
            //排除nonde_module下的js文件
            exclude:/node_modules/,
            
            //只检查src下的文件
            include：resolve(__dianame, 'src')
            
            //执行方式
            enforce:'pre/post',  //pre优先 、post延后
            
            //单个loader用loader
            loader:'eslint-loader'
			
			//多个loader用use数组
			use: ['style-loader', 'css-loader']
        }
	]
}

---

resolve

解析模块规则：如文件路径，路径别名

类型：object


//对象属性：
resolve： {
	alias：{}，
	extensions： {}，
	modules： {}
}


具体：
resolve: {
	//路径别名：以$符代表src路径，在引入文件时可以用：import xxx from '$/xxx'
	alias: {
		$: resolve(__dirname, 'src')
	}

   //配置省略文件路径的后缀名：引入文件时，可以省去后缀
   extensions: ['.js', '.jsx', '.json', '.css', '.less', '.ts', '.tsx']

   //告诉webpack解析模块是去找node_modules目录，用于目录深的项目
   modules:[resolve(__dirname, '../../node_modules'), 'node_modules']
}

---

plugins

插件，告诉webpack，在什么时候，做什么事情

类型：array

---

devServer

开发服务器，热更新，设置端口，解决跨域，自动打开浏览器等等

类型：object

---

devtool

source-map代码映射，当打包出现错误时，快速查看源代码的错误在哪里

类型：string


开发模式：devtool: 'cheap-module-eval-source-map',  
生产模式：devtool: 'cheap-module-source-map',  


//每个关键字代表的含义
source-map：代码映射，但打包会慢，需要配置其他关键字
eval：打包速度最快的一种方式，执行效率最快，性能最好的一种打包方式。
cheap: 只监视入口文件的业务代码和打包后的js代码的准确性。
module: 不仅监视业务逻辑的错误，还会监视入口文件中引入的第三方模块以及一些loader的代码错误。

---

target

编译模式

类型：string
参数：'web' | 'node'

---

optimization

优化配置，用于提升构建或者加载的速度

如：

类型：object

optimization: {  
	usedExports: true  //导出的模块被使用才进行打包
}  

---

externals

忽略打包

类型：object

---

总结：

这一篇说明一些概念以及配置的文件对象，下一篇配置各种常见的配置，如css，less，图片，react等

---

学习更多

webpack学习导图