webpack基础配置学习

一、webpack基础配置

1. 安装webpack、webpack-cli(建议使用生产环境)

npm i webpack webpack-cli --D

2. 配置打包指令

// 使用全局webapck进行打包 命令行执行
npx webpack

// 如果要使用项目下的webpack打包   可以使用以下指令      该指令会优先在项目路径下寻找webpack相关的依赖   
npx webpack

	然而更好的选择是在项目下生成一个包管理文件，统一对项目依赖进行管理：

// 生成package.json文件
npm init
// 或者下面这个   区别在于下面这个不需要去选择命令行提示的选项
npm init -y 

	现在就有了一个package.json文件，在文件的sctipt下，配置webpack打包指令：

{
	{
		"script":{
			"build":"webpack"
		}
	}
}

3. 配置项目入口、出口
   默认情况下，项目的入口文件webpack默认是src文件夹下的index.js文件；输出会自动生成dist文件夹，内含打包后的js文件和静态文件列表；
   但是也可以对入口出口做一个配置，在项目根目录下新建webpack.config.js文件：

// ./src/webpack.config.js
const path = require('path')

module.exports = {
	entry:"./src/test.js", // 自定义入口文件为test.js
	output:{
		filename:"bundle.js",
		path: path.resolve(__dirname,'./dist/bundle.js')  // path必须是绝对路径
	}
}

// 或者可以指定多个入口   除了下面这种方式   还可以通过字符串数组的方式指定多个入口    最终多个入口打包而来的文件都会被注入到html文件中
module.exports = {
	entry:{
		multi1:"./src/multi1.js",
		multi2:"./src/multi2.js"
	}, // 自定义入口文件为test.js
	output:{
		filename:"bundle.js",
		path: path.resolve(__dirname,'./dist/bundle.js')  // path必须是绝对路径
	}
}

	这样一来，webpack的基础配置以及完成，其他配置则只需要根据需要在webpack.config.js中酌情添加即可。

二、loader的使用

	webpack在不依赖其他的情况下，能自动对我们编写的js代码做解析和转换最后帮助我们打包成为静态资源文件；但是有一些情况webpack并不能帮我们自动完成文件的转换和打包，比如css文件、less文件、md文件等等。
	这时候我们就需要在webpack中配置loader的使用，告诉webpack某些文件需要以什么规则去转换。

1. 下载需要配置的loader（css为例）：

npm install css-loader

2. 在webpack配置中配置loader什么时候对什么文件做解析：
   配置loader有两种方式：配置式加载和内联式加载
   先看配置式：

// 在webpack配置文件中如下配置
module.exports = {
	module:{
	rules:[
			// 写法1
			{
				test:"/\.css$/", // test指定哪些后缀的文件需要加载该loader
				use:{ // use指定对该后缀的文件采取什么样的加载规则
					loader:"css-loader"
				}
			},
			// 写法2
			{
				test:"/\.ts$/", // test指定哪些后缀的文件需要加载该loader
				use:{ // use指定对该后缀的文件采取什么样的加载规则
					loader:"ts-loader",
					options:{modules:true}
				}
			},
			// 写法3
			{
				test:"/\.ts$/", // test指定哪些后缀的文件需要加载该loader
				use:{ // use指定对该后缀的文件采取什么样的加载规则
					"ts-loader"
				}
			}
			// .....可以继续添加loader
		]
	}
}

内联方式（不推荐使用）：会覆盖webpack.config文件中的原有配置！！！

// 以下写法说明使用css-loader去解析css
import myCss from "css-loader! ./src/myCss.css"

同理，其他loader的配置也是如此。

三、css解析完成后样式不生效如何解决

	css解析完成后，要想使css生效，还需要有style-loader的配合才行，按照如下配置，样式会被加载到html文件中：

// 在webpack配置文件中如下配置
module.exports = {
	module:{
	rules:[
			// 写法1
			{
				test:"/\.css$/", // test指定哪些后缀的文件需要加载该loader
				use:["style-loader","css-loader"] // webpack解析是从数组最后一个开始倒着解析的  
			}
		]
	}
}

这里需要注意一点： webpack解析是从数组最后一个开始倒着解析的，所以书写的顺序决定了样式是否能被正确注入到html！！！

四、插件的使用

	loader主要负责某些模块的类型转换，而插件更加神通广大。
	在webpack中使用插件，只需要进行下列的配置即可：
	1.	配置方式使用插件：

// 第一步 安装插件
npm install somePlugins -D

// 第二步  在webpack配置文件中require这个插件
const somePlugins = require('somePlugins');
const webpack = require('webpack') // 用于加载内置插件

// 第三步  如下配置   需要使用new关键字   这样写的目的是为了插件能被多次调用
module.exports = {
	plugins:[
		// 插件数组内可以很多个想要使用的插件（前提是得安装了嘛  是吧铁子）
		new somePlugins(options) // 多数插件是可以传一个options自定义参数的    options是一个对象
	]
}

2.Node API方式使用：

// demo.plugins.js
const webpack = require('webpack'); // 访问 webpack 运行时(runtime)
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function (err, stats) {
  // ...
});

五、文件资源打包配置（webpack4及以下建议使用）

1. 安装file-loader

npm install -D file-loader url-loader  //url-loader是file-loader的封装

2. 配置loader

{
    test:/\.(jpe?g|png|wenp)$/, //正则匹配
    use:{//匹配到的使用这个loader
        loader:'url-loader',
        options:{  //loader 参数
            name:'[name].[ext]',//名字
            limit: 14000,//pic大小小于url 时会变成data json存储在url里
            outputPath:'img/',  输出文件夹
            publicPath:'dist/img'   //打包后引用的url前加上 publicpath
        }
    }
},

如此配置即可，webpack可以打包文件静态资源。