【】webpack

一、什么是webpack

是前端资源的构建工具，将各种前端资源做模块化处理，打包生成对应的静态资源

二、webapck的五个核心

1、入口(Entry):webpack以哪个文件作为入口开始打包，分析和构建内部依赖图

2、输入(Output)：将打包好的资源输出到哪个以及如何命名

3、打包器(Loader)：让webpack能够处理那些非js的文件（如样式、图片等），webpack本身只能理解js文件

4、插接(Plugins)：可以执行范围更广的任务，从打包优化、压缩到后来的重新定义环境的变量等

5、模式(Mode)：指示webpack使用相对应模式的配置，有两种模式：开发模式和生产模式

development(开发模式)：能让代码在本地调试运行的环境

production(生产模式)：能让代码优化上线运行的环境

三、webpack的初始化配置和打包js文件

1、下载安装webpack：

从文件里面cmd进入

全局安装/本地安装：cnpm i webpack webpack-cli -g/-D

或者

npm init -y

npm install webpack webpack-cli --save-dev

2、在创建的文件夹里面创建src文件夹，里面创建入口文件index.js和mjs文件，然后将mjs文件里面的内容导入index.js文件中，

3、打包index.js文件webpack ./scr/index.js -o ./dist

打包成功，查看dist文件夹下自动生成了一个main.js

然后在src下面创建一个index.html调用

开发环境：webpack ./src/index.js -o ./dist --mode=development

生产环境：webpack ./src/index.js -o ./dist --mode=production

webpack会以./src/index.js为入口文件开始打包，打包输出到./dist 整体打包环境

配置 webpack.config.js 文件 可以改模式还有 打包生成js文件的名字 

web只能处理js和json的资源 不能出来img/css

生产环境比开发环境多一个压缩js代码

webpack可以帮我们打包js文件，只要指定入口文件（index.js）和输出的文件（bundle.js）还可以处理模块化直接的依赖

四、webpack开发的基本环境配置

webpack.config.js是webpack的配置文件，它告诉webpack干哪个活，当运行weback时，会加载里面的配置

每次打包都要输入出入口非常麻烦可以进行一下设置

初始化node包：npm init

 设置完成后可以直接用webpack进行打包

也可以这样设置

五、什么是loader和它的使用

webpack本身不能对img/css/es6转es5等 但是借助loader进行扩展就可以对这些资源进行打包了

loader的使用：1、通过npm安装

                        2、通过webpack.config.js中的modules关键字下进行配置

css文件的打包

新建一个css文件，然后将css文件引入到入口文件中，然后打包npm run build 会出现错误，因为webpack不能打包css文件，这时候就需要借助loader进行扩展。

首先通过npm进行安装

npm install --save-dev css-loader

然后执行npm run build虽然打包成功，但是样式并没有变，因为css-loader只负责加载css文件并不负责解析，所以还需要安装

npm install --save-dev style-loader

安装完成之后还需要通过webpack.config.js中的modules关键字下进行配置

less文件的打包 

在css文件夹下新增一个less文件，将less文件导入入口文件index.js，

打包时安装

npm install --save-dev less-loader less

在webpack.config.js中进行配置

 然后进行打包就可以了

img文件打包

打包图片的时候可以直接打包，但是不能指定图片的位置，因此需要在webpack.config.js中进行配置，

 html资源的打包

打包html资源的时候需要使用插件

首先安装插件 npm install --save-dev html-webpack-plugin

然后在引入插件 

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

最后在微博pack.config.js中进行配置 

这样打包就会成功，但是在html中插入图片会发现打包不成功

这个时候需要安装

npm install --save-dev html-loader

安装完成后在webpack.config.js中进行配置

 然后在进行打包就可以了

其他资源的打包(除去html、img、css、less)

可以直接npm run build 进行打包 但是这个打包的位置不是很好

可以在webpack.config.js中进行配置

六、webpack生产环境的基本配置

提取css成单独文件

因为在开发环境中，将css进行打包之后他是包含在打包后的js中的，css不多的时候还行，如果以后写项目有许多css样式就要提取出来成单独的文件

首先先安装：

npm install --save-dev mini-css-extract-plugin

然后在引入

const MiniCssExtractorPlugin = require('mini-css-extract-plugin')

在webpack.config.js中进行配置

 

最后运行就会生成一个css文件

压缩css 

先安装

npm install css-minimizer-webpack-plugin --save-dev

在引入插件

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

 在webpack.config.js中进行配置

js压缩

将mode: 'development'改成 mode: 'production',

html的压缩

css的兼容性

 先安装

npm install --save-dev postcss-loader postcss

npm install --save-dev postcss-preset-env

 配置webpack.config.js

package.json中配置