上一篇：前端自动化测试又一连载来啦！本次我们将分为四篇文章来介绍如何从0搭建webpack开发环境，并了解其内部机制和原理，让我们更准确的掌握和使用webpack。下面开始我们的开篇：1.什么是Webpack？webpack是现代JavaScript应用程序的静态模块打包器。当webpack处理一个应用程序时，它会递归地构建一个包含应用程序需要的每个模块的依赖图，然后将所有这些模块打包成一个或多个bundle，使用Webpack作为前端构建工具：代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等；文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等；代码切分：提取多个页面的公共代码，提取不需要在首屏执行的部分代码允许异步加载；模块合并：一个模块化的项目中会有很多模块和文件，需要构建一个功能将模块归类并合并到一个文件中；自动刷新：监听本地源代码的变化，自动重建并刷新浏览器；代码校验：代码提交入库前，需要校验代码是否符合规范，单元测试是否通过；自动发布：代码更新后，自动构建在线发布代码并传输至发布系统。webpack应用中有两个核心：1）模块转换器，用于将模块原有内容按需求转换成新的内容，可以加载非JS模块；2）扩展插件，在Webpack构建过程的特定时刻注入扩展逻辑，改变构建结果或者做你想做的事情。2.初始化项目├──src#源码目录│├──a-module.js│└──index.jswritea-module.jsmodule.exports='hello';编写index.jsleta=require('./a-module');console.log(a);这里我们使用CommonJS模块导入，该方法默认无法在浏览器运行，希望通过webpack打包！3、webpack快速入门3.1安装npminit-ynpminstallwebpackwebpack-cli--save-devwebpack默认支持0配置，配置scriptsscript"scripts":{"build":"webpack"}执行npmrunbuild，会默认调用node_modules/.bin下的webpack命令，内部会调用webpack-cli解析用户参数进行打包。默认情况下，src/index.js将用作入口文件。这里也可以使用npxwebpack，npx是npm在5.2版本之后提供的命令，可以执行.bin下的可执行文件，我们发现已经生成了dist目录，这个目录就是最终的打包结果。main.js可以在html中直接引用，这里也提醒一下，默认模式是production。3.2webpack.config.js我们在打包的时候一般不会使用0配置，webpack在打包的时候会默认在当前目录下搜索webpack.config.js或者webpackfile.js文件。通过配置文件打包：constpath=require('path');module.exports={entry:'./src/index.js',output:{filename:'bundle.js',//打包结果文件路径：path.resolve(__dirname,'dist')//打包到dist目录下}}3.3配置打包模式我们需要在打包的时候提供mode属性来区分开发环境和生产环境，实现配置的反汇编文件点。├──build│├──webpack.base.js│├──webpack.dev.js│└──webpack.prod.js我们可以通过指定不同的文件来打包配置脚本："scripts":{"build":"webpack--config./build/webpack.prod","dev":"webpack--config./build/webpack.dev"}可以通过config参数指定，使用哪个配置文件打包。通过env参数区分“脚本”：{"build":"webpack--env.production--config./build/webpack.base","dev":"webpack--env.development--config./build/webpack.base"}改造webpack.base文件的默认导出函数，环境变量会传入函数的参数中。module.exports=(env)=>{console.log(env);//{development:true}}合并配置文件我们可以判断当前环境是否是开发环境来加载不同的配置，这里需要做配置合并安装webpack-merge:npminstallwebpack-merge--save-devwebpack.dev配置module.exports={mode:'development'}webpack.prod配置module.exports={mode:'production'}webpack.base配置constpath=require('path');constmerge=require('webpack-merge');//开发环境constdev=require('./webpack.dev');//生产环境constprod=require('./webpack.prod');constbase={//基础配置入口:'./src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'../dist')}}module.exports=(env)=>{如果(env.development){returnmerge(base,dev);}else{returnmerge(base,prod);}}在后续的开发中，我们会将public的逻辑放在base中，开发和生产中的配置也分开存放！4.webpack-dev-server配置开发服务器，可以打包到内存，自动启动服务。npminstallwebpack-dev-server--save-dev"scripts":{"build":"webpack--env.production--config./build/webpack.base","dev":"webpack-dev-server--env.development--config./build/webpack.base"}执行npmrundev启动开发环境：默认情况下，服务配置会在当前根目录下启动。开发服务的配置constpath=require('path')module.exports={mode:'development',devServer:{//改变静态文件目录的位置contentBase:path.resolve(__dirname,'../dist'),compress:true,//启用gzipport:3000,//更改端口号}}5.打包Html插件5.1单入口打包自动生成html，并导入打包后的文件编辑webpack.base文件constHtmlWebpackPlugin=require('html-webpack-plugin');plugins:[newHtmlWebpackPlugin({filename:'index.html',//打包文件名template:path.resolve(__dirname,'../public/index.html'),hash:true,//在引用资源后加上hash戳minify:{removeAttributeQuotes:true//去掉属性双引号}})]5.2多入口打包根据不同的入口生成多个js文件导入到differenthtml:──src├──entry-1.js└──entry-2.jsmultipleentry需要配置多个entryentry:{jquery:['jquery'],//jquery包entry1:path.resolve(__dirname,'../src/entry-1.js'),entry2:path.resolve(__dirname,'../src/entry-2.js')},output:{filename:'[name].js',path:path.resolve(__dirname,'../dist')},生成多个html文件newHtmlWebpackPlugin({filename:'index.html',template:path.resolve(__dirname,'../public/template.html'),hash:true,minify:{removeAttributeQuotes:true},chunks:['jquery','entry1'],//导入的chunk是jquery,entry}),newHtmlWebpackPlugin({filename:'login.html',template:path.resolve(__dirname,'../public/template.html'),hash:true,minify:{removeAttributeQuotes:true},注入:false,//injectisfalse不注入js文件chunksSortMode:'manual',//手动配置代码块顺序chunks:['entry2','jquery']})上面的方法不是很优雅，每次需要手动添加HtmlPlugin应该动态生成html文件，像这样：.地图（项目=>新的HtmlWebpackPlugin（{文件名：item.html，模板：path.resolve（__dirname，“../public/template.html”），散列：true，缩小：{removeAttributeQuotes：true}，块：[“jquery”，item.entry]}));plugins:[...htmlPlugins]6.清空打包结果可以使用clean-webpack-plugin手动清空一个文件夹的内容：installnpminstall--save-devclean-webpack-pluginconst{CleanWebpackPlugin}=require('clean-webpack-plugin');newCleanWebpackPlugin({//清空匹配路径cleanOnceBeforeBuildPatterns:[path.resolve('xxxx/*'),'**/*'],})这样specifieddirectorycanbeclear现在，我们可以看到webpack插件的基本用法是newPlugin，放在plugins中7.总结现在对webpack的使用有初步的印象或者更多的想法吗？大神们的大剑是不是快要不受控制了？下一期会介绍webpack要知道的各种配置，敬请期待！
