webpack学习

最新推荐文章于 2025-08-23 16:39:24 发布

转载最新推荐文章于 2025-08-23 16:39:24 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ba06e2ae51d450e6e03a458

文章标签：

#webpack #javascript #前端 #ViewUI

本文详细介绍了node_modules的作用及如何使用Webpack进行打包部署。解释了loader与plugins的区别，并提供了entry配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

node_modules 是一些依赖库，只是在工程阶段使用发布到线上的时候不会有，就是帮助打包生成最终成品的工具，
如下图通过node_modules里面的一系列工具，将app.js cats.js打包成了app.bundle.js 最终发到线上的就是app.bundle.js

需要做一些自己想要的功能的时候，就可以将配置信息写在webpack.config.js中，比如压缩js,将less转为css,压缩图片等等

loader loader也是一种工具，比如可以将es6的语法转换成es5的，还有配合react vue来使用
babel-core 是将es6语法转换成es5的核心工具，babel-loader是将es6文件给到babel-core然后再拿到转换好的文件
plugins：插件比如压缩Js代码的插件
loaders与plugins的区别：loader其实类似是一个转化器，比如 es6语法有些浏览器不支持，那么通过loader将es6的转化为es5的，plugins是对结果进行一个优化，比如将js代码进行一个压缩等
entry :

entry如果是字符串的话
const config = {
  entry: './path/to/my/entry/file.js'
};
其实是以下的简写
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }，
  output:{
      filename: '_[name].js'
  }
};
也就是 打包之后 会默认打包出一个main.js

如果是对象的写法的话

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  },
  output:{
      filename: '_[name].js'
  }
};
后面会打包出一个 app.js 和一个vendors.js 会以 entry的key作为文件名
复制代码

output 例子：

var path = require('path');
output: {
    //导出目录
    path:path.resolve(__dirname,'dist'),
    //path定义输出到哪个文件中，比如我们把dist改成dist2你就会发现 打包好的文件 都会放在dist2里面了
    ,__dirname 总是指向被执行 js 文件的绝对路径
    
    
    publicPath: "/assets/",
    这个一般都是用来做异步加载的，
    
    
    //包规范格式
    libraryTarget:'umd',umd: universal module defination 
    library: "mylibrary",
    这个是应用于开发插件时，就是把这个代码变成一个库供给别人用
    
    //文件名
    chunkFilename: '[chunkhash]_[id].js',
    
    
    //hash位数
    hashDigsetLength:2,
    
    
    //导出文件名
    filename: [name].js 
    如果我们把文件导出名改成： filename:[chunkhash]_[name].js 你会发现在dist中的文件的名字就会是
    b1_index.html b4_index2.html 类似于这种的,chunkhash就是
    name就是上面提到的entry里面的key, 
    chunkhash就是：webpack每次去编译文件的时候，他都会认为是一个chunk,块状的一个数据，会对这个块状的数据做一个哈希
    所以编译出来的文件名字可能就是类似于： b5_index.html b9_index2.html 前面会带一个哈希值，那么这个哈希值为什么都是两位呢？
    因为我们写了hashDigestLength:2,如果改成其他的数字就会变成其他的位数了
    我们也可以不定义hashDigestLength:2这个，而是改写filename 为： filename:[chunkhash:2]_[name].js 也是有同样效果的
    
    为什么要定义哈希呢？
    因为前端比较头疼的就是缓存，那么通过哈希可以缓解这部分的痛点
}
复制代码

split

split: 文件拆分

复制代码