Loader
作用:webpack本身只能打包Javascript文件,对于其他资源例如 css,图片,或者其他的语法集,比如jsx是没有办法加载的,
这就需要使用对应的loader对资源进行转换并将其加载进来。
定义:loader 是一个导出为函数的 JavaScript 模块
一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader,返回 webpack 所预期的 JavaScript。
webpack 采用的是 Compose(执行一系列的任务(函数)):
compose=(f,g)=>(…args)=>f(g(…args));
运行环境:有独立的运行环境,可使用loader-runner进行调试和开发
Plugin
无loader那样的独立运行环境,只能在webpack中运行
作用:伴随整个webpack从初始化到资源生成的整个过程的,功能更为强大。
编写一个简单的webpack:
步骤:
1.使用npm init -y 生成的默认的package.json
2.在 package.json 中设置build命令:
"scripts": {
"build": "webpack"
},
3.新建my-plugin文件:(apply方法是怎么调用的可见文章“webpack原理剖析”)
module.exports = class MyPlugin {
constructor(options) {
this.options = options;
}
apply(complier) {
console.log('My plugin is executed!');
console.log('My plugin options', this.options);
}
}
4.新建webpack.config.js文件:
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'main.js'
},
mode: 'production',
plugins: [
new MyPlugin({
name: "My----Plugin"
})
]
}
5.执行npm run build
可见plugin中的方法被执行