webpack

经过babel.js转换的才能export default，否则只能用module.export

打包工具：webpack、rollup、parcel、FLS

安装命令：
npm i webpack -D
npm i webpack-cli -D

webpack会自动将src目录下的index.js文件压缩到dist目录的main.js里
注development不会压缩，production会压缩

webpack. config.js是默认配置入口和出口的文件，可以在package.json的scripts配置–config scripts/文件名来指定webpack配置中的编译文件

const path = require('path')
module.exports = {
	//entry: './src/abc.js',
	// 配置入口文件并定义出口文件的名字
	entry: {
		main: './src/home.js',
		about: './src/about.js'
	}
	// 导出入口文件到指定的目录
	output: {
		path: path.resolve(process.cwd(), "dist"),
		// 指定出口文件，可以加上hash值防止浏览器缓存
		// chunkhash只重新生成更改过的文件
		filename: '[name].[chunkHash:8].js'
	}
}

plugin

npm i --save-dev html-webpack-plugin

html-webpack-plugin：npm安装，会自动在dist目录的index.html（没有则会创建）里引入入口文件，并绑定hash值

在webpack.config.js里引入该包，并在plugins里面配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	plugins: [
		new HtmlWebpackPlugin({
			// 在模板文件的title标签中插入<%= htmlWebpackPlugin.options.title %>来使用定义的title
			title: 'webpack',
			// 模板
			template: 'public/index.html'
		})
	]
}

loader

loader的执行顺序：后写的先执行

css-loader

需要安装css-loader和style-loader
在webpack.config.js里配置module

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

在src目录里写css，在入口js文件中引入直接编译后加载到dist的index.html文件里，不会在dist里生成css文件

mini-css-extract

需要安装mini-css-extract
在webpack.config.js里配置plugins，并把module里的style-loader替换成MiniCssExtractPlugin.loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
	plugins:[
		new MiniCssExtractPlugin({
			filename: '[name].css'
		})
	],
	module:{
		rules: [
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader'
				]
			}
		]
	}
}

可以在dist里面生成css文件

less-loader

webpack-dev-server

本地的服务器，需要安装webpack-dev-server

需要在package.json里的scripts配置"dev": "webpack-dev-server --mode development --config scripts/webpack.config.js"

npm run dev：在本地服务器上运行项目，不需要npm run build

可以在webpack.config.js里面配置本地服务器的相关内容

module.exports = {
	devServer: {
		//自动打开
		open: true,
		port: 8000
	}
}

browserslist

调用caniuse的api来实现检验属性在不同浏览器的兼容性

file-loader

处理文件
npm install file-loader -save-dev