webpack的生产模式兼容性处理

清疚 2022-12-12 12:26 210阅读 0赞

## webpack的生产模式兼容性处理 ##

*注意不要有中文路径并且文件扩展名必须显示出来不然会有小问题*

*  初始化
 *  > npm init --yes  
    > 初始化过后修改package.json,scripts下面添加个配置文件 意思就是使用一个配置文件来编译  
    > “build”:“webpack --config ./webpack.config.js”
 *  安装包
 *  > yarn add webpack webpack-cli --dev
 *  在根目录上创建一个文件
 *  > webpack.config.js `此文件不可改`  
    > webpack配置4大点：  
    > `1.`入口entry 也就是文件最后运行的文件  
    > `2.`出口output  
    > `3.`loader  
    > `4.`plugins插件

`注意：此处命名不可更改`

创建`dist`文件夹  
创建一个html文件，如何将html渲染到dist文件下面

> 导入一个插件 `yarn add html-webpack-plugin --dev` 这是一个开发依赖

删除初始化文件夹

> 导入一个插件`yarn add clean-webpack-plugin --dev` 引入的时候需要结构，这是直接清空output下面的目录也就是dist不需要的文件

webpack处理兼容性问题

> 导入两个插件`yarn add babel-loader @babel/core --dev`

新建一个`.babelrc`来实现兼容性处理

> 首先安装插件`yarn add @babel/preset-env --dev`  
> `preset-env`他会根据你当前的环境配置来决定我要使用那些处理方式

{ 
        "presets":[               //presets 预设也就是预期的结果 env环境变量，根据当前环境变换
            ["@babel/preset-env",     
            { 
              "useBuiltIns":"usage",   //"useBuiltIns"到底用什么方式插入的，usage 代表用到就插入，还有其他值entry开始就插入，false默认不插入
               "corejs":"2",    //第二个版本
                "targets":{ 
                    "browsers":[        //浏览器列表
                        "last 1 version",   //从浏览器最后一个版本开始往前兼容
                        "> 1%",          //互联网市场大于1%的
                        "not dead"         //没有被淘汰的
      ]}}]]}

> 并不是越严格越好，反而性能不高，最好写死比如ie7,ie8

为了更好的兼容性还需要导入插件来适应ES6独有的比如map，aymbol等使用`pollfily`，生成器函数使用`core-js`来处理，因此还需要导入垫片来更好的处理兼容

> 导入两个插件`yarn add core-js@2 @babel/polyfill`因为这两个插件属于生成依赖所以导入时不用加`--dev` `2`代表第二个版本，@babel/polyfill相当于垫片 这样ES6里面有的ES5也都有了

#### css兼容性处理 ####

在项目中新建一个css文件夹

> 在入口文件js中添加  
> //在js文件是导入了一个css文件，让js去处理css  
> `import "../css/index.css"`

**导入相关插件**

> `yarn add css-loader --dev` 此插件是用来处理那些非Java Script文件,因为`Webpack`本身是只能处理js文件的

在webpack.config.js添加规则，此时css文件全部插在js里面，因此还要导入style-loader将其显示到页面上

> `yarn add style-loader --dev`

处理css兼容性

> `postcss-loader`是一个用JavaScript转换css兼容性的插件

##### 此时还并没有转换，因为还缺少预设因此还要创造一个配置文件 #####

在文件中新建一个`postcss.config.js`文件

//这是postcss的配置文件
    module.exports={ 
        //postcss处理css文件的时候需要的插件
        plugins:[
            require("postcss-import"),
            require("postcss-cssnext"),
            require("cssnano"),
        ]
    }

> 下载3个常用插件  
> `yarn add postcss-import postcss-cssnext cssnano --dev`  
> 并且还要在package.json 最下面配置目标浏览器兼容性

"browserslist": [
        "last 2 version",
        "> 1%"
      ]

> 此时所有css文件都已经做了兼容性

#### sass需要导入的插件 ####

`yarn add sass-loader node-sass --dev`

#### 图片处理兼容性 ####

`yarn add url-loader --dev`  
`yarn add file-loader --dev` 这两个文件通常一起使用图片大的时候就使用文件形式