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

最新推荐文章于 2023-01-02 17:22:25 发布

南麟剑首

最新推荐文章于 2023-01-02 17:22:25 发布

阅读量260

点赞数

分类专栏： webpack 前端文章标签： webpack4.0 webpack教程 webpack常用

本文链接：https://blog.csdn.net/qq_38560742/article/details/84106646

版权

前端同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

webpack

5 篇文章 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' ]
  }
};