webpack进修笔记1

2023年6月1日 265次阅读 来源: 小铀蔻德尔

webpack作用

webpack可以将前端工程中一切的静态资本打包成为一个或许多个js，静态资本包含css、图片等。

为何要运用webpack，没有打包东西之前，页面当中运用ES6、SCSS、TypeScript等浏览器不支撑的前端新语法的时刻都异常难题，有了webpack就可以异常轻易的在项目当中运用这些新的语法，从而提拔前端项目开辟的速率和质量。另外在webpack当中项目中一切的资本都是模块，包含js，还包含css、图片等等。只需有适宜的loader去处置惩罚这些静态资本就可以了。webpack还供应了插件的功用，雄厚了webpack的功用。以上的这些让webpack成为前端项目构建东西的主流和首选，gulp和grunt可以成为了汗青。头部资本终将占有统治职位，webpack成为前端项目构建东西的头部资本。

模块化编程

模块的观点是将顺序拆解为离散的功用块，一般称这些功用块为模块。模块相对于顺序而言，具有更小的体积，单个模块具有清楚的目标，轻易举行开辟、测试、保护等事情。模块的功用经过了笼统，提高了代码的复用才能。

模块的翻开姿态

webpack支撑罕见的模块依靠，如es5的import，commonjs的require，css文件的@import，款式中的url。webpack可以支撑的模块有webpack罕见的loader

webpack中心观点

entry 进口文件

webpack是经由过程递归的体式格局来找出一切依靠之间的关联，并构建依靠图。须要在设置文件中指定运用哪一个模块作为依靠图的肇端，进入肇端依靠后就可以依据肇端模块中指定的依靠来将其他依靠将入进来。多个进口婚配单一输出：entry:’./src/script/main.js’，在main.js当中可以运用require或许其他要领比方import来导入其他的文件。
module.export = {entry:'./index.js'}

当存在多个进口的时刻呢，可以运用entry:[]的情势。
多个进口文件婚配多个输出结果：entry必需采纳对象的体式格局，如许可以运用对象的key作为出口文件的文件名。并在差别的文件中运用这些差别的输出。示例：entry：{page1:’a.js’,page2:’b.js’}，output:{path:’输出结果的绝对途径’,filename:[name].js}这里必需运用占位符来到达天生差别文件的结果，为了显现屡次输出的差别版本号可以运用[hash]占位符。
hash值采纳md5算法，即依据文件中内容来转变。

output 输出文件

output指定了终究要将打包好的js放在什么途径下，默许是dist。途径指定的是绝对途径，须要经由过程nodejs的path模块来猎取当前的文件途径。
const path = require('path')
module.export = {output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'}}

loader 加载器（中间件）

loader让webpack有才能去处置惩罚费JavaScript文件，webpack自身只能明白JavaScript。雄厚loader（官方的和第三方）可以将一切范例的文件都转化为webpack可以明白的JavaScript，webpack发挥的作用是将JavaScript和转化为JavaScript的资本根据相互依靠的关联打包。
而且这些loader之间可以天真的组装，开辟者可以依据本身的需求天真的定义loader的组成。loader的设置要领为
module.export = {

module:{
    rules:[
        {
            test:\.js$\,
            loader:'babel-loader'
        },
        {
            test:\.css$\,
            loader:'style-loader!css-loader'
        }
    ]
}

}
设置文件通知webpack当碰到相符test对应正则表达式的文件时，先运用对应的loader转化一下。

babel-loader的运用要领

装置babel loader来处置惩罚es6的语法，装置npm较多，包含babel-loaderbabel-core\
babel-loader可以经由过程参数presets（预设）来指定es6的版本，可选的参数有：’es2015′,’es2016′,’es2017′,’latest’。在运用preset的时刻不仅须要经由过程config.js来指定运用何种preset，还须要装置相干的preset的npm包。比方装置preset为latest的的npm包，敕令是：npm install babel-preset-latest --save-dev

plugin 插件

另有一部分事情是loader不能完成，比方紧缩、打包优化、从新定义环境中的变量等等。可以说plugin的才能是loader的父集。运用plugin的体式格局是先引入插件模块，经由过程require。然后在设置对象的plugin中建立插件的实例。
const htmlWebpackPlugin = require(‘html-webpack-plugin’)
module.export = {

plugin:[
    new htmlWebpackPlugin({template:'./index.html'})
]

}

plugin接收一个数组作为其value，数组中是各个插件的组织函数，可以在这些组织函数传入相干的参数来到达目标。比方经由过程运用html-webpack-plugin来完成自动引入打包的内容，不再运用手动的体式格局来完成。还可以到场[hash]来保证引入文件的定名的唯一性，从而可以保证上线时刻援用的是最新的版本。

html-webpack-plugin的参数有：
{filename:’天生的文件名’,
title:’文件中的title’,
template:’以什么文件作为其模板’,
chunks:[‘运用什么chunk’],
excludeChunks:[‘消除什么chunk’]
inject:[‘chunk的援用放在什么地方’]
}

webpack敕令行的一些参数

  • 1.指定特定文件的loader： –module-bind ‘css=style-loader!css-loader’
  • 2.显现打包历程： –progress
  • 3.显现一切打包模块： –display-modules
  • 4.显现打包缘由： –display-reasons
  • 5.指定打包设置文件： –config
  • 6.自定义敕令行剧本：在package.json当中来定义
    原文作者：小铀蔻德尔
    原文地址: https://segmentfault.com/a/1190000017182125
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞