Webpack系列-Loader与插件

admin 2022年4月17日22:49:34安全工具评论12 views2037字阅读6分47秒阅读模式

Loader

Webpack默认情况下只能给js进行打包;

后面加入了给其他文件打包的功能,就有了Loader; Loader就是在webpack里面帮助开发者处理不同模块的;

比如想要给jpg这种图片打包,就要使用file-loader;

## 安装webpack
$yarn add webpack webpack-cli --dev
#安装插件
yarn add file-loader
#或者
npm install file-loader

而后:

npx webpack

插件(plugins)


src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

安装插件:

yarn add html-webpack-plugin

此时webpack.config.js:

const path = require('path');

//此插件作用:自动生成dist/index.html,
// 并且引入生成的js文件即:`dist下面的js文件`
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  entry: {
    main'./src/index.js',
    sub'./src/index.js'
  },
  output: {
    publicPath'http://cdn.xxx.com/',//添加这一行之后,dist下生成的index.html里面的src就会补全url
    path: path.resolve(__dirname, 'dist'),
    filename'[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({  //这里的作用是帮你在`dist/index.html`里面添加`/src/index.html`里面的一行
      template'./src/index.html'
    })
  ]
}




此时的dist下的index.html就会发生变化:


<script defer="defer" src="sub.js"></script>

会变为:


<script defer="defer" src="http://cdn.xxx.com/sub.js"></script>

有了模板template之后: dist下的index.html就会增加一行:


<div id="app"></div>

往往在重新打包的时候需要手动删除dist文件,往往使用clear-webpack-plugin这个插件来实现自动删除; 安装插件:

yarn add clean-webpack-plugin
#或者 
npm install clear-webpack-plugin -D

同时webpack.config.js中:

plugins: [
  new HtmlWebpackPlugin({
    template'./src/index.html'
  }),
  new CleanWebpackPlugin()
]

file-loader

module: {
    rules: [
      {
        test/.(jpg|png|gif)$/,//表示能够处理后缀为jpg,png,gif结尾的图片
        use: {
          loader'file-loader',
          options: {
            // 占位符 placeholder,表示生成的图片的路径
            //为dist/images/
            //名字为 `src/`中jpg的图片的名字这里为avatar
            //avatar_hash值.后缀
            name'[name]_[hash].[ext]',
            outputPath'images/'
          }
        }
      }
    ]
  }

配置文件见: https://github.com/richard1230/CodeLearning/blob/main/Javascript/Webpack/Loader/webpack.config.js


原文始发于微信公众号(迪哥讲事):Webpack系列-Loader与插件

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年4月17日22:49:34
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  Webpack系列-Loader与插件 http://cn-sec.com/archives/920383.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: