三.webpack基本配置

webpack基本配置

1.关于webpack.config.js

首先我们先建立这样的目录

文件说明：
src ： 放置源文件的目录
dist ： 放置打包后文件的目录
index.html ： 初始化页面(要手动引用生成的js文件)
entry.js : 入口js文件
entry2.js : 入口js文件
webpack.config.js ： webapck的配置文件

1.1 webpack.config.js的说明

webapck的配置文件， (具体的配置在文档 API—>configuration )为何建立webpack.config.js ，是因为在命令行中执行webpack会默认寻找目录下的webpack.config.js，以webpack.config.js的配置去运行。
当然也可以webpack --config hcd.js 执行hcd.js中的配置

webpack.config.js的基本结构

module.exports={
   
		//当前环境设置
		mode: 'production',
	    //入口文件的配置项
	    entry:{
   },
	    //出口文件的配置项
	    output:{
   },
	    //模块：例如解读CSS,图片如何转换，压缩
	    module:{
   },
	    //插件，用于生产模版和各项功能
	    plugins:[],
	    //配置webpack开发服务功能
	    devServer:{
   }
}

1. mode: webpack4新增的特性,会默认启用对当前环境设置的默认插件，方便开发或者有利于打包输出。
2. entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
3. output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
4. module：配置模块，主要是解析CSS和图片转换压缩等功能。
5. plugins：配置插件，根据你的需要配置不同功能的插件。
6. devServer：配置开发服务功能。

入口配置和出口配置：

//模块化输出
	module.exports = {
   
		mode: 'development',
		//入口文件,一般使用绝对路径，__dirname为webpack.config.js所在的文件夹
		entry:__dirname+'/src/entry.js',
		// 打包后的文件
		output:{
   
			//打包后文件在./dist/js的文件夹中
			path:__dirname+'/dist/js',
			//打包后文件的名称
			filename:'bundle.js'
		}
	}

再在命令行中执行 webpack 命令：

结果目录为：

我们可以看到已经自动打包生成了dist文件夹和bundle.js

2. mode 模式

mode配置选项将告诉webpack相应地使用其内置优化。

mode在配置中提供选项：

module.exports = {
   
  mode: 'development'
}