webpack是现代JavaScript应用的静态模块打包器，前端模块化的基础。作为一名前端工程师（车兔仔），学习是非常有必要的。webpack官网的文档很好，中文文档也很给力，堪比vue。建议先阅读概念章节，然后阅读指南，再阅读API和配置概述。看完引导教程，还需要自己动手练习才能更有影响力。下面记录一下我搭建react开发环境的过程。准备工作安装webpackyarn添加webpackwebpack-cli-D创建配置目录结构configwebpack.common.jswebpack.dev。jswebpack.prod.jsscriptsbuild.js//构建模式脚本start.js//开发模式脚本srcindex.jspackage.json尝试一个简单的配置配置启动脚本命令package.json..."license":"MIT",+"scripts":{+"start":"node./scripts/start.js",+"build":"node./scripts/build.js"+},"devDependencies":{"webpack":"^4.35.2","webpack-cli":"^3.3.5"}...编写webpack配置，以src/index.js为主入口，构建为打包目录config/webpack.common。jsoutputpathfield这里配置的绝对路径constpath=require('path');module.exports={entry:"./src/index.js",output:{path:path.resolve(__dirname,"../build"),filename:"bundle.js"}}编写开发模式运行脚本脚本/build.jsconstwebpack=require('webpack');constwebpackConfig=require('../config/webpack.common.js');webpack(webpackConfig,(err,stats)=>{if(err||stats.hasErrors()){console.log("编译失败");}});webpack节点接口文档：https://www.webpackjs.com/api...在入口写一点内容src/index.jsconsole.log('hello')执行yarnbuild命令生成打包目录运行生成的`bundle.js`配置开发服务器-webpack-dev-serverinstalldevserver和merge配置工具yarnaddwebpack-dev-serverwebpack-merge-D重写webpack配置文件，common文件导出一个基本的可以传递参数的配置生成器，prod和dev文件使用webpack-merge将通用配置和各自的模式合并配置合并导出config/webpack.common.jsconstpath=require('path');functionwebpackCommonConfigCreator(options){/***options:*mode//开发模式*/return{mode:options.mode,entry:"./src/index.js",output:{filename:"bundle.js",路径:path.resolve(__dirname,"../build"),}}}module.exports=webpackCommonConfigCreator;config/webpack.prod.jsconstwebpackConfigCreator=require('./webpack.common');constmerge=require('webpack-merge');constconfig={}constoptions={mode:"production"}module.exports=merge(webpackConfigCreator(options),config);config/webpack.dev.jsconstwebpackConfigCreator=require('./webpack.common');constmerge=require('webpack-merge');constconfig={}constoptions={mode:"development"}module.exports=merge(webpackConfigCreator(options),config);script/build.jsconstwebpack=require('webpack');constwebpackConfig=require('../config/webpack.prod.js');webpack(webpackConfig,(err,stats)=>{if(err||stats.hasErrors()){console.log("编译失败");}});yarnbuild打包，输出正常配置webpack-dev-serverconfig/webpack.dev.js这里的contentBase选项是服务器模式下的输出。服务器开启后，webpack会实时将代码编译到内存中...+constpath=require('path');constconfig={+devServer:{+contentBase:path.join(__dirname,"../dist")+}}...scripts/start.jsconstwebpack=require('webpack');constwebpackDevServer=require('webpack-dev-server');constwebpackConfig=require('../config/webpack.dev.js');constcompiler=webpack(webpackConfig);constoptions=Object.assign({},webpackConfig.devServer,{open:true})constserver=newwebpackDevServer(compiler,options);server.listen(3000,'127.0.0.1',()=>{console.log('Startingserveronhttp://localhost:8080');})运行命令yarnstart，浏览器会自动弹出一个窗口，访问localhost:3000/bundle.js相关链接webpack4详细教程，从零开始搭建react脚手架（二）webpack4详细教程，从零开始搭建react脚手架（三）webpack4详细教程，从零开始搭建react脚手架（四）来源代码github仓库：https://github.com/tanf1995/周...
