npm init -y npm install webpack webpack-cli --save-dev
根目录新建文件夹loaders --> splitLoader.js splitLoader.js
module.exports=function(source){return source.split('');}
下面我们看下关于异步操作具体写法:
module.exports=function(source){const callback=this.async();setTimeout(()=>{const result=source.split('');callback(null,result);},100);}
webpack 基础配置
const path=require('path');module.exports={entry:'src/index.js',resovleLoaders:{modules:['node_modules','./loaders']}module:{rules:[{test:/\.js$/,use:[{loader:'splitLoader', //若没有配置resovleLoader,则需要下面这种写法// loader:path.resolve(__dirname,'./loaders/splitLoader')}]}]}output:{filename:'[name].js',path:path.resolve(__dirname,'dist');}}
npm init -y npm install webpack webpack-cli --save-dev
webpack.config.js
const path=require('path');const CopyrightWebpackPlugin=require('./plugins/copyRight-webpack-plugin');module.exports={entry:'src/index.js',plugins:[new CopyrightWebpackPlugin(),]output:{filename:'[name].js',path:path.resolve(__dirname,'dist')}}
根目录创建文件夹 plguins, coypriht-webpack-plugin.js
// 一个 JavaScript 命名函数。class CopyrightWebpackPlugin{constructor(options){//获取插件里的参数console.log(options);}// 在插件函数的 prototype 上定义一个 `apply` 方法。apply(compiler){// 指定一个挂载到 webpack 自身的事件钩子。//第一个参数插件名 第二个回调函数compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation,callback)=>{console.log("Done with async work...");// 功能完成后调用 webpack 提供的回调。callback();});//下面写法与上面功能一样// compiler.plugin("emit", function(compilation, callback) {// // 做一些异步处理……// setTimeout(function() {// console.log("Done with async work...");// callback();// }, 1000);// });}}