在很久很久以前,在我们前端还只是页面切图仔的年代,我们开发一个html页面,通常会遇到这些情况:
webpack可以看做是模块打包工具:它将各种静态资源(比如:javaScript 文件,图片文件,css文件等)视为模块,它能够对这些模块进行解析优化和转换等操作,最后将它们打包在一起,打包后的文件可用于在浏览器中使用。
相关推荐
本人github: github.com/Michael-lzg
我的掘金:https://juejin.im/user/
1.利用babel完成代码转换,并生成单个文件的依赖
2.从入口开始递归分析,并生成依赖图谱
3.将各个引用模块打包为一个立即执行函数
4.将最终的bundle文件写入bundle.js中
webpack 应该使用哪个模块做为入口文件,来作为构建其内部依赖图的开始。进去入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的,每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。
单⼊⼝:entry 是⼀个字符串
module.exports = {
entry: './src/index.js'
}
多⼊⼝:entry 是⼀个对象
module.exports = {
entry: {
index: './src/index.js',
manager: './src/manager.js'
}
}
告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,这些都可以在webpack的配置文件中指定。
单⼊⼝配置
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js’,
path: __dirname + '/dist'
}
};
多⼊⼝配置
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
通过[name]占位符确保⽂件名称的唯⼀
loader 让 webpack 能够去处理那些非 javaScript 文件(webpack 自身只理解 javaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
处理图片资源时,我们常用的两种loader是file-loader或者url-loader,两者的主要差异在于。url-loader可以设置图片大小限制,当图片超过限制时,其表现行为等同于file-loader,而当图片不超过限制时,则会将图片以base64的形式打包进css文件,以减少请求次数
vue-loader 是 webpack 的加载器模块,它使我们可以用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分,即模板、脚本和样式。 vue-loader 模块允许 webpack 使用单独的加载器模块(例如 sass 或 scss 加载器)提取和处理每个部分。该设置使我们可以使用 .vue 文件无缝编写程序。
需求:手写一个 loader,将 'kobe' 转换成 'Black Mamba'。当然大家可以根据自己的需求进行设计。这里只是讲解方法。
在根目录下,新建目录 kobe-loader 作为我们编写 loader 的名称,执行 npm init -y 命令,新建一个模块化项目,然后新建 index.js 文件,相关源码如下:
module.exports = function(content) {
return content && content.replace(/kobe/gi, 'Black Mamba')
}
正常我们安装的 loader 是从 npm 下载安装,但是我们可以在 kobe-loader 目录底下使用 npm link 做到在不发布模块的情况下,将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下,让项目可以直接使用本地的 npm 模块。
npm link
然后在项目根目录执行以下命令,将注册到全局的本地 npm 模块链接到项目的 node_modules 下
$ npm link kobe-loader
注册成功后,我们可以在 node_modules 目录下能查找到对应的 loader。
在 webpack.base.conf.js 加上如下配置
{
test:/\.js/,
loader: 'kobe-loader'
}
此时,我们在所有 js 文件下书写的 'kobe' 就全部替换成 'Black Mamba'了。
上面我们是写死的替换文案,假如我想通过配置项来改变,可以在 loader 中做以下调整
// custom-loader/index.js
var utils = require('loader-utils')
module.exports = function (content) {
const options = utils.getOptions(this)
return content && content.replace(/kobe/gi, options.name)
}
// webpack.base.conf.js
{
test:/\.js/,
use: {
loader: 'kobe-loader',
options: {
name: 'kobe',
}
}
}
专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。
在根目录下,新建目录 my-plugin 作为我们编写插件的名称,执行 npm init -y 命令,新建一个模块化项目,然后新建 index.js 文件,相关源码如下:
class MyPlugin {
constructor(doneCallback, failCallback) {
// 保存在创建插件实例时传入的回调函数
this.doneCallback = doneCallback
this.failCallback = failCallback
}
apply(compiler) {
// 成功完成一次完整的编译和输出流程时,会触发 done 事件
compiler.plugin('done', stats => {
this.doneCallback(stats)
})
// 在编译和输出的流程中遇到异常时,会触发 failed 事件
compiler.plugin('failed', err => {
this.failCallback(err)
})
}
}
module.exports = MyPlugin
按照以上的方法,我们在 my-plugin 目录底下使用 npm link 做到在不发布模块的情况下,将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下,让项目可以直接使用本地的 npm 模块。
npm link
然后在项目根目录执行以下命令,将注册到全局的本地 npm 模块链接到项目的 node_modules 下
$ npm link my-plugin
注册成功后,我们可以在 node_modules 目录下能查找到对应的插件了。
在 webpack.base.conf.js 加上如下配置
plugins: [
new MyPlugin(
stats => {
console.info('编译成功!')
},
err => {
console.error('编译失败!')
}
)
]
执行运行 or 编译命令,就能看到我们的 plugin 起作用了。
在开发中碰到一个问题,如果公共配置写在src里面会被打包,无法做到可读性可以随时更改配置,所以只能写在static文件夹下,那么就实现一个公共配置文件吧。
vue路由是可以通过组件的形式把所有的组件组装成为一个应用程序,当我们需要的时候,将这个组件映射到路由,然后告诉Vue 我们在哪里渲染它们。路由是我们浏览器的一个地址。
Node 里面去跑,具体场景一些路由配置, 比较大的一块 JSON 数据定义在 TypeScript 里,我另外有增加脚本, 基于这些 JSON 数据用来生成切换路由的函数,这就需要运行 TypeScript 了, 而且可能包含一些额外的业务代码。
看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接,写在一个文件下更能有全局感受,更能理解各个属性中间的关系,重点要关注entry,output,resolve,module, plugins几部分
ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写js代码更加得心应手,比如class,let,for...of promise等等这样的,但是可惜的是这些js新特性只被最新版本的浏览器支持
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!