随笔 - 134, 文章 - 0, 评论 - 0, 阅读 - 21187

webpack

webpack-cli -v

npm install webpack -cli -g

webpack是前端项目工程化的具体方案

前端模块化开发
代码压缩混淆
处理浏览器的JavaScript的兼容性
性能优化

操作：

1初始化

npm init -y

2.引入jquery

 npm i jquery -S

问题：ES6的兼容性问题：

Uncaught SyntaxError: Cannot use import statement outside a module

安装webpack

npm i webpack@5.5.1 webpack-cli@4.2.0 -D

项目中配置webpack

1.创建webpack的配置文件

webpack.config.js

module.exports={
    mode:'development'
}

2.新增脚本dev

  "scripts": {
    "dev":"webpack"//scrip节点下的脚本可以通过 npm run 执行 例如npm run dev
  },

mode的可选值

development

开发环境
不会对打包生成的文件进行压缩和性能优化
打包速度快，适合在开发阶段

production

生产环境
会对打包的生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js

打包前会先读取配置文件的内容，基于配置文件打包
webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的配置

webpack的默认约定

默认打包的入口文件为：src-->index.js
默认的输出为文件路径为dist---->main.js

entry-->指定打包的入口

output----->指定打包的出口

webpack的插件

拓展webpack的能力

webpack-dev-server
- 类似与node.js阶段用到的nodemon工具
- 每当修改了代码，webpack都会自动的进行项目的打包
html-webpack-plugin
- webpack中的html插件（类似模板引擎插件）
- 可以通过此插件来自定制index.htm页面的内容

webpack-dev-server自动监听

npm i webpack-dev-server@3.11.0 -D

1.需要修改webpack中的dev命令

  "scripts": {
    "dev": "webpack serve"
  },

打包的文件去哪了？

1.不配置会放到物理磁盘上

2.打包的会放到内存上，默认放到项目的根目录中

    <script src="/bundle.js"></script>

html-webpack-plugin

npm i html-webpack-plugin@4.5.0 -D

配置：

const path = require('path');
//导入html插件，得到一个构造函数
const HtmlPlugin =require('html-webpack-plugin');
//创建HTML的插件实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',//源文件的存放路径
    filename:'./index.html',//指定生成文件的存放路径
})

module.exports={
    mode:'development',
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[htmlPlugin]
}

注意点：

1.也是将index.html放到了内存中，会自动的注入webpack-dev-server生成的js文件

2.删除dist文件不会影响正常运行

devServer节点

    devServer:{
        open:true,
        host:'127.0.0.1',
        port:80
    }

Loader

webpack只能默认打包处理.js后缀的结尾的文件

协助webpack打包处理特定的文件模块

css-loader可以打包处理.css相关的文件

npm i style-loader@2.0.0 css-loader@5.0.1 -D

    module:{
        rules:[//文件后缀名的匹配规则
        {
            test:/\.css$/,use:['style-loader','css-loader']
        }
        ]
    }

顺序不能反，先后后前。先css-loader然后是style-loader

less-loader可以打包处理.less相关的文件
```
npm i less-loader@7.1.0 less@3.12.2 -D
```
babel-loader可以打包处理webpack无法处理的高级的js语法

解决url的资源
```
npm i url-loader@4.1.1 file-loader@6.2.0 -D
```
小图片变成base64
```
npm i babel-loader@8.2.1 $babel/core@7.12.3 @babel/plugin-proposal-class-propertries@7.12.1 -D
```
为什么要打包？

因为要把内存的文件变成实际的文件
```
  "scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production"
  },
```
1.自动清理dist文件
```
npm install claen-webpack-plugin@3.0.0 -D
```
企业打包发布：
- 生成打包报告，根据报告分析具体的报告
- 为第三方库启用CON加载
- 配置组件的按需加载
- 开启路由懒加载
- 自定首页内容