webpack学习

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

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

  1. loader loader也是一种工具,比如可以将es6的语法转换成es5的,还有配合react vue来使用
  2. babel-core 是将es6语法转换成es5的核心工具,babel-loader是将es6文件给到babel-core然后再拿到转换好的文件
  3. plugins:插件 比如压缩Js代码的插件
  4. loaders与plugins的区别:loader其实类似是一个转化器,比如 es6语法 有些浏览器不支持,那么通过loader将es6的转化为es5的,plugins是对结果进行一个优化,比如将js代码进行一个压缩等
  5. 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作为文件名
复制代码
  1. 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 也是有同样效果的
    
    为什么要定义哈希呢?
    因为前端比较头疼的就是缓存,那么通过哈希可以缓解这部分的痛点
}
复制代码
  1. split
split: 文件拆分

复制代码
收藏成功!
已添加到「」, 点击更改