WebPack4.0拿去即用系列(二)

短命女 2022-04-16 02:12 150阅读 0赞

# Loader #

**一、 什么是Loader**  
通过使用不同的`Loader`，`Webpack`可以要把不同的文件都转成`JS`文件,比如`CSS`、`ES6/7`、`JSX`等  
**test**：匹配处理文件的扩展名的正则表达式  
**use**：loader名称，就是你要使用模块的名称  
**include/exclude**:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹  
**query**：为loaders提供额外的设置选项

> 举个例子，如果你此时去去js中导入css，打包过后会报错，为什么，因为webpack默认引入的文件都当作js处理，那怎么办？此时就需要loader

> 常用loader： `npm install css-loader style-loader less-loader url-loader html-withimg-loader file-loader`

`url-loade`可以将指定大小及以下的图片文件转成base64写入js，避免额外请求图片资源，如果超过指定大小再使用  
`file-loader`打包图片文件。  
`html-withimg-loader`：让html也支持图片获取

*  当然了，还有更多，根据实际需要添加

**二、 loader三种写法**

> 加载CSS文件，CSS文件有可能在node\_modules里，比如bootstrap和antd

写法一`loader`

module: { 
                rules: [
                    { 
                        test: /\.css/,
                        loader:['style-loader','css-loader']
                    }
                ]
            }

写法二 `use`

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

写法三`use+loader`

module: { 
            rules: [
                { 
                    test: /\.css/,
                    include: path.resolve(__dirname, "./public/css"),//包含指定文件夹
                     exclude: /node_modules/,                        //排除某些可能含有相同类型文件的文件夹
                    use: [{ 
                        loader: "style-loader",
                        options: { 
                            insertAt: "top"                          //从什么位置放入style
                        }
                    }, "css-loader"]
                },
                { 
                    test: /\.less/,                                  //解析less
                    include: path.resolve(__dirname, "./public/css"),
                    use: [{ 
                        loader: "style-loader",
                        options: { 
                            insertAt: "top"
                        }
                    }, "css-loader","less-loader"]
                }
            ]
        },

提示：如果没能执行成功很可能是在js页面没有导入资源

`import "../public/css/index.less"`

## html，css，js图片支持和压缩处理 ##

module: { 
          rules: [
                { 
                 test:/\.jpg|.png|.gif/,use:{ 
                      loader:"url-loader",
                       options:{ 
                        limit:8*1024   //此处可以做限制，大于多少k就以图片形式呈现，默认base64
               }
          ]
      },
    JS引入图片
    
      *import img from "./m.jpg"
      
      let png=new Image()
      png.src = img
      document.getElementById("root").appendChild(png)
      
    css引入图片
      .logo{ 
          background-image: url(./images/logo.png);
      }
    
    html 引入图片
    
      module: { 
          rules: [
              { 
                  test:/\.html/,use:{ 
                      loader:"html-withimg-loader",
                      options:{ 
                          limit:8*1024   //此处可以做限制，大于多少k就以图片形式呈现，默认base64
              }
          ]
      }

## css样式抽离 ##

因为CSS的下载和JS可以并行,当一个HTML文件很大的时候，我们可以把CSS单独提取出来加载生成`link`  
将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap  
只能用在webpack4中，对比另一个插件 extract-text-webpack-plugin:  
1，异步加载  
2，不重复编译，性能更好  
3，更容易使用  
4，只针对CSS

mini-css-extract-plugin

filename 打包入口文件  
`chunkFilename` 用来打包import(‘module’)方法中引入的模块

一、下载并引入`mini-css-extract-plugin`

const minicssplugin=require("mini-css-extract-plugin")

二、在plugins实例化并指定output规则

new minicssplugin({
              filename: '[name].css',      //name :entry中的key
              chunkFilename:'[id].css'
        })

三、在将rules中css的loader替换

rules: [
                {
                    test: /\.css/,
                    include: path.resolve(__dirname, "./src"),
                    use: [{
                        loader: minicssplugin.loader,   //换成
                        options: {
                            insertAt: "top"
                        }
                    }, "css-loader", "less-loader"]
                },

## 压缩css和js ##

下载引入对应的插件

cnpm i uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin -D

一、引用

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
    const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

二、配置压缩参数

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
        const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
        module.exports = {
            mode: 'development',
            optimization: {
                minimizer: [
                    new UglifyJsPlugin({
                        cache: true,//启动缓存
                        parallel: true,//启动并行压缩
                        //如果为true的话，可以获得sourcemap
                        sourceMap: true // set to true if you want JS source maps
                    }),
                    //压缩css资源的
                    new OptimizeCSSAssetsPlugin({})
                ]
            },

## 解析TS ##

一、安装全局TS

cnpm install typescript -g

二、初始化TS编译环境

tsc -init

三、安装`ts-loader`

cnpm install typescript  ts-loader -D

四、配置规则

rules: [
            {
                test: /\.ts$/,
                use: {
                    loader: "ts-loader"
                },
                include: path.resolve(__dirname, "./src/ts"),         //只索引某个文件夹下
                exclude: path.resolve(__dirname, "./node_modules/")   //不索引某文件夹
            }
        ]

## css添加前缀 ##

一、安装 `cnpm install postcss-loader autoprefixer -D`  
二、根目录创建`postcss.config.js`文件  
内容：  
`module.exports={ autoprefixer:require("autoprefixer") //此处还可以添加({...args})指定兼容版本，此处略 }`  
三、在css rules中增加 `postcss-loader`

rules: [
                {
                    test: /\.css/,
                    include: path.resolve(__dirname, "./src"),
                    use: [{
                        loader: minicssplugin.loader,
                        options: {
                            insertAt: "top"
                        }
                    }, "css-loader", "postcss-loader"]
                }
         ]

## 解析ES6、ES7、react，装饰器 ##

一、安装插件

cnpm install babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react babel-plugin-transform-decorators-legacy babel-loader@7 install babel-plugin-transform-runtime  babel-polyfill -D

二、创建.babelrc文件

{//注意此处的匹配顺序从下往上顺序匹配解析
        "presets":[
            "env",
            "react",
            "stage-0"
        ]，
        "plugins":[
            "transform-runtime",
            "transform-decorators-legacy"
        ]
    }

三、在需要转义的页面填写（或者抽取公共）

import "babel-polyfill"

四、修改webpack.config.js

rules: [
                 {
                   {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader'
                    },
                    include: path.join(__dirname,'src'),
                    exclude:/node_modules/
                }
            ]

## 使用第三方库比如JQ ##

一、安装你想要的插件如`jquery`

cnpm install jquery

方式1、使用`wbepack`自带插件

const webpack = require("webpack")

方式2、使用暴露插件

cnpm install expose-loader
    let $require("expose-loader?$!jquery");   //js文件中直接使用

方式3如果直接以cdn的形式引入外部库的时候，再webpack.config.js添加如下

external:{ //指定使用外部引用资源，不用打包
        "jquery":"$"
    },

js中引用

`let $=require("jquery")` //即可使用jquery

## 转发代理 ##

直接转发

devServer: {
            port: 8008,
            proxy:{          //当我本地发起服务端请求时，以/api开头的请求，均转发到指定api
                "/api":"http://localhost:3000"
            }
        }

修改路径

proxy: {
        "/api": {
           target: 'http://localhost:3000',
           pathRewrite:{"^/api":""}        
        }            
    }

//内置server内置模拟数据策略

devServer: {
                contentBase: path.resolve(__dirname, "./dist"),
                host: "localhost",
                compress: true,
                port: 8008,
                hot: true,
                before(app){   
                  app.get("/api/user",function(req,res,next){     //模拟请求数据
                      res.json({username:"harry",age:27})
                  })
                }
            },

//讲webpackServer集成到我们自己的Server中  
一、安装中间件

cnpm install webpack-dev-middleware

二、在server中引入中间件

let app=express()
    1、let webpackDevMiddleware=require(" webpack-dev-middleware")
    2、let config=require("./webpack.config")
    3、let webpack=require("webpack")
    4、let compiler=webpack(config)
    5、 app.use(webpackDevMiddleware(compiler))
    app.listen(3000)

## resolve解析 ##

一、不加扩展名，依次匹配

resolve: {
      extensions: [".js",".jsx",".json",".css"]
    },

二、配置别名可以加快webpack查找模块的速度

引入bootstrap模块的时候，直接引入bootstrap,不需要从node\_modules文件夹中按模块的查找规则查找

const bootstrap = path.resolve(__dirname,'node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css');
    resolve: {
     alias:{
        "bootstrap":bootstrap
       }
    },

三、 modules  
对于直接声明依赖名的模块（如 react ），webpack 会类似 Node.js 一样进行路径搜索，搜索`node_modules`目录  
这个目录就是使用`resolve.modules`字段进行配置的 默认配置

resolve: {
    modules: ['node_modules'],
    }

限制查找范围，后面还可以自定义文件夹，如 module

resolve: {
    modules: [path.resolve(__dirname, 'node_modules'，'module')，path.resolve(__dirname, 'module')],
    }

四、mainFields  
默认情况下`package.json` 文件则按照文件中 `main` 字段的文件名来查找文件

resolve: {
      // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：
      mainFields: ['browser', 'module', 'main'],
      // target 的值为其他时，mainFields 默认值为：
      mainFields: ["module", "main"],
    }

五、mainFiles  
当目录下没有 `package.json` 文件时，我们说会默认使用目录下的 `index.js` 这个文件，其实这个也是可以配置的

resolve: {
      mainFiles: ['index'], // 你可以添加其他默认使用的文件名
    },

六、resolveLoader  
`resolve.resolveLoader`用于配置解析 `loader` 时的 `resolve` 配置,默认的配置：

module.exports = {
      resolveLoader: {
        modules: [ 'node_modules' ],
        extensions: [ '.js', '.json' ],
        mainFields: [ 'loader', 'main' ]
      }
    };

## webpack优化 ##

待续…

如有错误，敬请留言指点，我立马改正，以免误导他人~谢谢！