webpack

 

一、什么是webpack？

模块化的打包机，分析项目找到js模块以及一些浏览器

 

vue-cli 是通过webpack封装的

通过vue-cli把vue文件转换成js文件

 

二、webpack的用处：

代码转换(es6-->es5 less-->css )

文件优化(代码压缩)

代码分割(公共模块抽离)

模块合并

自动刷新(热更新)

代码校验

自动发布(发布到服务器)

 

三、基础node.js语法：

module.exports：

导出一个模块

require：引入一个模块

path:node.js：内置的路径模块

__dirname：文件夹的绝对路径

 

四、五大组成部分

入口：entry

出口：output

装载机：loader

插件：plugins

模式：mode

本地服务：devServer

 

额外的配置：

开启本地服务----代理接口

内置的压缩配置

内置的代码分割配置

实时打包的监听

开启调试map文件  bundle.js   bundle.map(源码调试)

 

五、webpack打包

 

初始化环境：npm init -y
npm init 初始化npm包文件，-y所有都是yes
npm --seve-dev === -D 开发环境
--seve === -S 生产环境
注意：如果安装时不加-D或者-S 依赖包也会被下载下来，只不过package.json文件不会有记录

webpack安装：

全局 || 局部(优先使用)

优先使用局部安装的好处：便于管理版本

 

全局安装命令：npm i -g webpack webpack-cli
卸载全局：npm uninstall -g webpack
局部安装命令：npm i -D webpack webpack-cli [webpack-cli只在v4x]
卸载局部：npm uninstall -D webpack

weback 0 配置

直接运行webpack就可以进行打包

webpack默认的两个文件夹：src[源代码]、dist[编译后的代码目录]

在命令行：npx webpack 他会自动去找目录下的src文件夹，打包出一个dist目录，里面是我们打包后的代码

npx命令是npmv4x之后出现的，用来运行本地项目的依赖，若本地项目依赖包不在，他会给我们自动下载，使用完后以后，会默认删除掉下载的依赖包

npm是运行package.json文件中的scripts命令的，默认会在当前项目的node_modules包找，找不到就去全局寻找，直到找到，否则报错

 

webpack打包

webpack默认就是打包js的，它默认只能是编译es6的模块[export和import]

 

当默认使用webpack命令时，它会自动执行node_modules包里面的默认配置文件:webpack.config.js

 

当我们在项目目录中创建了webpack.config.js后，在使用npx webpack的话，会自动创建webpack.config.js

 

可以命令指定webpack加载别名的配置文件

 npx webpack --config webpack.config.dev.js

gulp：比 webpack 更早 grunt：比 gulp 还早

gulp：管道流-代码从一头进入，从另一头出来，这个管道内部就会将代码进行编译

 

webpack-dev-server:

npm install --save-dev webpack-dev-server

devServer: {
     // 监听目录
     contentBase: "./dist",
     // 启动后自动打开浏览器
     open: true
 },

它是用express封装的，使用它会启动webpack服务，会执行编译，编译的文件不会产生物理文件，会将编译的内容存到内存中去

那么一般来说使用它，我们需要使用htmlwebpackplugin配合开发

 

 

六、插件

htmlwebpackplugin：编译html文件

它是一个插件，写在webpack配置中的plugins数组中

它是将html模板进行编译，并把webpack编译好的js脚本注入到HTML页面里

 

clean-webpack-plugin：清空打包目录

两个参数：from：源文件 to：拷贝到哪里

可以将一些非项目文件进行拷贝到特定的位置

 

copy-webpack-plugin

- from:源文件，

- to:拷贝到哪里

将单个文件或整个目录复制到构建目录

 

new webpack.BannerPlugin()

给打包后的文件插入版权信息

 

mini-css-extract-plugin：分离css文件

安装命令：npm i -D mini-css-extract-plugin

它是一个插件，需要在plugins里面使用

还需要在css-loader前面使用，并且它和style-loader只能二选一

 

压缩css文件

如果使用style-loader去处理css，css不会被压缩

如果使用css抽离，css也不会被压缩

使用terser-webpack-plugin和optimize-css-assets-webpack-plugin去压缩css代码

css文件代码会被压缩成一行

这两个插件不能放在plugins里面，要放在optimization.minimizer里

 

抽离公共js模块

js
   optimization: {
     minimizer: [new TerSer({}), new OptimizeCSSAssetsPlugin({})],
     // 代码分割只对多模块打包有用：多入口打包
     splitChunks: {
       // 分割代码js模块
       cacheGroups: {
         // 缓存组
         // 公共模块
         common: {
           chunks: "initial", // 从入口文件开始找公共文件
           minSize: 0, //指定被抽离的代码大小，不为0字节的js文件
           minChunks: 2 //引用在2次以上就会被抽离出来
         },
         // 私有的被执行的逻辑js
         vendor: {
           priority: 1, // 先执行这个，权重
           test: /node_modules/, // 把依赖包这个抽离出来
           chunks: "initial",
           minSize: 0,
           minChunks: 2
         }
       }
     } 

 

全局注入第三方库

首先引入webpack，这样配置好以后直接在src中使用$

``` new webpack.ProvidePlugin({       $: "jquery",       jQuery: "jquery" }) ```

 

cdn的使用

add-asset-html-cdn-webpack-plugin

使用 cdn，必须在 module 里配置 noParse

 

七、loader

loader是编译webpack不能识别的文件，辅助webpack打包的方案

loader写在module对象的rules数组里，每一个方案就是一个对象的形式去写

loader的执行顺序：从右向左，从下向上

 

css-loader style-loader

css-loader用来解析css语法，style-loader用来将编译完的css代码插入到页面

 

sass-loader

用来解析scss文件的，scss和less都是css预处理器

安装命令：npm i -D sass-loader node-sass

 

 

file-loader url-loader：图片使用可选的两种loader

1.样式里使用

2.js创建图片插入到页面元素

3.页面里使用(标签)

file-loader和url-loader都不能处理html里的img，用一个第三方的html-withimg-loader来处理

由于file-loader升级了，所以在配合html-withimg-loader时候会报错，需要在file-loader或url-loader里写一个配置：esModule:false

url-loader比file-loader多一个很核心的配置项：limit:Boolean||number 用来控制文件大小的，单位是b，一般会把很小的图片变成base64代码

 
{ test: /\.(png|jpg|jpeg|gif)$/,
 use: { loader: "url-loader",
 options: {
             esModule: false,
             // limit单位字节:b,当小于7kb变成base64.大于就生产图片文件引入
             limit: 1024 * 7,
             outputPath: "imgs/",
             // 占位符
             name: "[name][hash:4].[ext]"
 　　　　}
 　　}
 }

 

 

babel-loader：将 es6+变成浏览器可运行的 es5

安装命令【4.x】：npm install -D babel-loader @babel/core @babel/preset-env

语法：

javascript
module: {
rules: [
　　{
　　　　test: /\.js\$/,
　　　　exclude: /(node_modules|bower_components)/,
　　　　use: {
　　　　　　loader: 'babel-loader',
　　　　　　options: {
　　　　　　　　presets: ['@babel/preset-env']
　　　　　　}
　　　　}
　　}
]}

 

 

postcss-loader

给css新特性加前缀：postcss-loader 配合 autoprefixer

postcss-loader必须放在css-loader下面(postcss-loader先执行)

如果需要编译less或者scss，需要把postcss-loader放在预处理器loader的前面(postcss-loader后执行)

file-loader或者url-loader：打包字体

file-loader：选项配置里所有的loader都支持一个outputPath配置项，这个配置项是告诉被打包后的文件要去的目录

publicPath：公共的基础的路径，这个路径不会给生成物理的文件夹，它只会在代码里加上这个路径地址

publicPath一般用来设置CDN公共路径

 

八、devserver

代理服务

- devserver 里的 proxy 配置

- 作用：前端可以请求 proxy 配置的接口，它可以实现跨域

- 原理：使用 node.js 作为中间件去请求接口

- 同源策略是浏览器的规则，实际上前端的 js 不存在跨域

- 为什么说 node.js 不存在跨域呢，

因为 node.js 存在于服务端，不受浏览器限制，所以说后端语言都没有跨域的限制

 

九、源码映射

- devtool: "eval-source-map"

- 仅限在开发环境中开启便于调试

 

十、watch 实时监听 实时打包

- 只要开启了 watch，npm run build 时会一直监听，只要修改代码就会自动打包成新的文件

 

webpack和node.js的关系?

webpack是基于node.js

 

开发环境和生产环境的区别？

开发：对代码进行优化，打包等操作

生产：项目上线