1.4.webpack-dev-serverwebpack-dev-server是我们在开发阶段需要用到的服务器,它会将代码打包到内存中,我们可以通过http访问打包到内存中的代码安装npmiwebpack-dev-server@3.8.1-D修改package.json的启动命令"dev":"webpack-dev-server--env.production--config./build/webpack.base.js"添加webpack.dev的相关配置。jsconstpath=require("path")module.exports={mode:"development",devServer:{//默认访问根路径,webpack-dev-server会去这个路径寻找index.html文件并返回contentBase:path.join(__dirname,"../dist"),//启用gzip压缩以提高文件返回速度compress:true,port:8000,//启动后自动打开浏览器open:true}}#1.5.自动创建html文件在前面的webpack-dev-server中,我们设置的启动访问路径是项目下的dist目录,我们需要在这个dist目录下手动创建一个index.html文件,并手动添加打包的js文件到index.html文件中,此时,我们只能通过浏览器访问才能看到效果。在开发中,我们尝试使用工具来帮助我们完成工具可以完成的事情。我们可以使用html-webpack-plugin插件来帮助我们做到这一点,它的作用是根据模板文件生成一个静态文件,然后自动将打包后的js插入到html文件中。首先安装这个插件npmihtml-webpack-plugin@3.2.0-D添加相关配置constdev=require("../build/webpack.dev")constprod=require("../build/webpack.prod")constpath=require("path")常量合并e=require("webpack-merge")consthtmlWebpackPlugin=require("html-webpack-plugin")module.exports=function(env){constisDev=env.developmentconstbase={条目:path.resolve(__dirname,"../src/index.js"),output:{filename:"index.js",path:path.resolve(__dirname,"../dist")},plugins:[newhtmlWebpackPlugin({//设置Titletitle:"螺丝课堂",//设置模板路径template:path.resolve(__dirname,"../public/index.html"),//设置打包文件名filename:"index.html",//最小输出配置minify:{//折叠空白collapseWhitespace:true}})]}if(isDev){returnmerge(base,dev)}else{returnmerge(base,prod)}}注意如果要使用标题,需要在模板中使用该方法获取标题值<%=htmlWebpackPlugin.options.title%>#1.6。自动清除上一次打包的文件当我们进行打包操作时,会自动生成一个打包文件。如果有之前生成的文件,我们通常会手动删除之前生成的文件,以免混淆。这时候我们可以使用clean-webpack-plugin来帮助我们完成这个操作安装npmiclean-webpack-plugin@3.0.0-D添加相关配置constdev=require("../build/webpack.dev")constprod=require("../build/webpack.prod")constpath=require("path")constmerge=require("webpack-merge")consthtmlWebpackPlugin=require("html-webpack-plugin")const{CleanWebpackPlugin}=require("clean-webpack-plugin")module.exports=function(env){constisDev=env.developmentconstbase={entry:path.resolve(__dirname,"../src/index.js"),output:{filename:"index.js",path:path.resolve(__dirname,"../dist")},plugins:[newhtmlWebpackPlugin({title:"ScrewClassroom",template:path.resolve(__dirname,"../public/index.html"),filename:"index.html",minify:{collapseWhitespace:true}}),//每次打包前,先清空dist目录下的文件newCleanWebpackPlugin()]}if(isDev){returnmerge(base,dev)}else{returnmerge(base,prod)}}#1.7。解析css文件解析css文件需要两个加载器,css-loader和style-loader,css-loader的作用是解析css的语法,解析完成后传递给style-loader,style-loader会生成样式标签,然后把这些css代码插入到html文件中,这样html中就会有样式npmicss-loader@3.2.0style-loader@1.0.0-D配置文件添加配置项constdev=require("../build/webpack.dev")constprod=require("../build/webpack.prod")constpath=require("path")constmerge=require("webpack-merge")consthtmlWebpackPlugin=要求(“html-webpack-plugin”)const{CleanWebpackPlugin}=require(“clean-webpack-plugin”)模块。exports=function(env){constisDev=env.开发constbase={条目:路径。resolve(__dirname,"../src/index.js"),output:{filename:"index.js",path:path.resolve(__dirname,"../dist")},//每个文件被调用一个模块,模块用于配置和解析各种文件模块。模块涉及到几个问题,1哪些模块文件需要转换?2使用什么装载机来传输?3转账要用什么规则?模块:{规则:[{测试:/\.css$/,use:"style-loader"},{test:/\.css$/,use:"css-loader"}]},plugins:[newhtmlWebpackPlugin({title:"螺丝教室",模板:path.resolve(__dirname,"../public/index.html"),filename:"index.html",minify:{collapseWhitespace:true}}),//每次打包前,先清空dist目录下的文件newCleanWebpackPlugin()]}if(isDev){returnmerge(base,dev)}else{returnmerge(base,prod)}}注:loader的三种写法:1.String2Array3.我们在objects前面使用string其实在loader没有参数配置的情况下,我们更喜欢第二种写多个loader的方式,传递一个数组给loader模块:{rules:[{test:/\.css$/,use:["css-loader","style-loader"]}]},注意:css-loader和style-loader需要注意使用顺序,如果以字符串形式配置,css-loader要放在下面,如果以数组形式配置,css-loader要放在前面,如果顺序是incorrect,会报错