Webpack

Webpack

是什么

个人：将一个工程的各种模块打包成一个或多个bundle文件。（包括css，图像等），避免浏览器多次加载。

入口(entry)

代表webpack从哪个文件作为起点打包，并根据导入依赖的关系打包其他文件。

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口(output)

代表webpack将导出的bundle文件放在哪里，以及起什么名字。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。将非js类型的文件（css，less）转换为能够打包的文件。
在更高层面，在 webpack 的配置中 loader 有两个目标：

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
• use 属性，表示进行转换时，应该使用哪个 loader。

const path = require(‘path’);

const config = { output: {
filename: ‘my-first-webpack.bundle.js’ }, module: {
rules: [
{ test: /.txt$/, use: ‘raw-loader’ } //表明txt类型文件，使用raw-loader转换
] } };

module.exports = config;

很多类型的文件需要额外导入loader

插件(plugins)

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。（不明白）

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装插件
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})  //使用插件
  ]
};

module.exports = config;

模式

module.exports = {
  mode: 'production'//development
};

用来决定是否压缩(生产是压缩版)。

具体操作

先建立一个空工程，在工程上打开命令行
安装webpack
命令行 npm init -y （自动生成一个json文件）

命令行npm add webpack webpack-cli -D

webpack可以零配置

建立一个src文件夹，在里面建立index.js文件。
命令行npx webpack
自动打包并将生成的bundle放在新建立的dist文件夹中

也可以手动配置
建立webpack.config.js配置文件(内容示例)

let path = require('path');

module.exports = {
	mode:'development',  //模式
	entry:'./src/index.js', //入口
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist'),  //出口地址（必须绝对路径）
	}
}

如此便按照配置的属性打包。

webpack本地服务器
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。
安装webpack-dev-server
命令行 npm add webpack-dev-server -D
运行服务器(打包到内存中)
命令行 npx webpack-dev-server
如此可在http://localhost:8080/中访问内存中的文件
配置webpack本地服务器

webpack.config.js配置文件中加一个
devServer:{
contentBase: './build'，//更改载入内存的文件
port:3000  ,    //更改端口号
progress:true
},

pack.json中的srcript中加上

"dev":"webpack-dev-server"//简写

命令行 npm run dev
如此访问http://localhost:3000/只能看到build文件夹。
因为没有index.html文件，因而会显示

Cannot GET /

插件使用
为了自动打包src中的html文件，我么要使用html插件
先安装插件
命令行npm add html-webpack-plugin -D
修改webpack.config

let HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[    //放置要用的插件
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			filename:'index.html'
		})
	]

如此html便会被一起打包（若要压缩使用minify属性），运行服务器时便会自动渲染打包的index.html页面。

loader使用
样式打包
为了使css作为单独的模块被打包（link不行），需要在index.js导入以建立依赖关系。

require('./index.css');

安装css和style的loader
命令行npm add css-loader style-loader -D
修改webpack.config

module:{
		rules:[
			//css-loader 解析css语法，style-loader负责把css插入head中
			{test:/\.css$/,use:['style-loader','css-loader']}//user中的loader从右向左执行
		]
	}

这样写可以更改style插入位置为顶部（使优先级低于原页面style标签）

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

若要将样式模块单独导出为css文件，并用link引入html，需要引用插件
安装此插件 命令行npm add mini-css-extract-plugin -D
修改webpack.config

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
			filename:'main.css'    //导出的css文件名
		})
rules:[
            {test:/\.css$/,use:[
				MiniCssExtractPlugin.loader,
				'css-loader']}
		]

babel

将es6语法转换为es5使用babel-loader
安装要用的loader
命令行 npm add babel-loader @babel/core @babel/preset-env -D
修改webpack.config

{
				test:/\.js$/,
				use:{
					loader:'babel-loader',
					options:{//用babel-loader需要把es6转换成es5
						presets:[
							'@babel/preset-env'
						]
					}
				},exclude:/node_modules/ //防止对每个js文件转换
			}

用class还要添加babel插件的，实例的高级方法也要添加插件