开发环境配置
1、webpack的loader#
1.1、打包css时的loader#
当我们打包src/index.js文件时,该文件中导入的css,根据依赖关系css同样要进行打包，但webpack要通过loader来加载翻译对应的css文件，webpack默认只认识js和json所以要下载配置相应的loader (不同需求的loader可以在webpack官网查询并有安装配置方法)
而打包css需要css-loader 和style-loader这两个loader
（1）、本地安装css-loader和style-loader为开发依赖
npm install --save-dev css-loader style-loader（2）、配置文件中配置这两个loader
webpack.dev.js const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development',+ module: {+ rules: [+ { + //匹配哪些文件+ test: /\.css$/, + //use数组中loader执行循序为从右到左，从下到上+ use: [+ //创建style标签，将js中的样式资源插入，添加到head中生效+ 'style-loader',+ //将css文件变成commonjs模块加载到js中，里面内容是样式字符串+ 'css-loader'] + }+ ],+ },
});1.2、打包less时的loader#
当我们程序中有使用less编写css样式文件时，在打包的时候就需要通过安装配置webpack的less-loader来进行打包 （1）、本地安装less-loader
npm install --save-dev less-loader less（2）、配置loader
webpack.dev.js const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', requer: { rules: [ { //匹配哪些文件 test: /\.css$/, //use数组中loader执行循序为从右到左，从下到上 use: [ //创建style标签，将js中的样式资源插入，添加到head中生效 'style-loader', //将css文件变成commonjs模块加载到js中，里面内容是样式字符串 'css-loader'] + },+ {+ test:/\.less$/,+ use:[+ //创建style标签，将js中的样式资源插入，添加到head中生效+ 'style-loader',+ //将css文件变成commonjs模块加载到js中，里面内容是样式字符串+ //这会造成js文件过大加载很缓慢，如果比较慢当dom构建后这个css还未加载完的话就会先加载浏览器默认+ //式，当加载完后又会换成这个样式，这样会造成闪屏（需要打包成单独的文件）+ 'css-loader',+ //先将less文件转换成css文件+ 'less-loader'+ ]+ } ], }, });1.3、打包图片时的loader#
（1）、安装解析图片资源loader
npm install --save-dev url-loader file-loader html-loader注意 它会将大于8kb图片提取到output输出目录，file-loader不需要做使用配置,而在页面中通过img标签的src属性引入的图片则需要借组 html-loader将其变成common.js的方式进行依赖，然后url-loader才能解析到
然而使用html-loader导入的图片依赖是使用common.js模块话语法，url-loader默认使用es6模块话解析所以要在url-loader配置中添加esModule:false
（2）、配置
webpack.dev.jsmodule.exports = { module: { rules: [ //其他loader配置项 { //匹配哪些文件 test: /\.(jpg|png|gif)$/, loader:"url-loader", options:{ //当图片小于8kb就会被处理成base64字符串格式；优点可以减少请求，但体积会变大速度更慢，因此小于8kb才建议 limit:8*1024 , //url-loader默认使用es6模块话解析，而html-loader中是通过common.js模块话引入的 //解析时会出现：[object module]的问题 //关闭url-loader的es6模块化解析使用common.js esModule:false, //给图片重命名 //[hash:10]取图片的hash的前10位 //[ext]原文件后缀名 name:'[hash:10].[ext]', //指定输出文件夹 outputPath:"media" }, { test:/\.html$/, //处理html中<img>标签里src属性引用的图片（负责引入img从而被url-loader处理） loader:"html-loader" } }], },};
2、热更新devServer#
构建开发服务器devServer：用来自动化编译自动打开浏览器，自动刷新浏览器
注意 开发服务器运行时只会在内存中进行编译打包，不会有任何的输出
2.1、在配置文件中配置#
webpack.dev.js |- const HtmlWebpackPligin=require('html-webpack-plugin') |- |- module.exports = { |- //入口起点 |- entry: './src/index.js', |- //输出位置和名称 |- output: { |- //输出文件名 |- filename: 'bundle.js', |- //输出位置 |- path: path.resolve(__dirname, 'dist'), |- }, |- module: { |- rules: [{ |- //匹配哪些文件 |- test: /\.css$/, |- //use数组中loader执行循序为从右到左，从下到上 |- use: [ |- //创建style标签，将js中的样式资源插入，添加到head中生效 |- 'style-loader', |- //将css文件变成commonjs模块加载到js中，里面内容是样式字符串 |- 'css-loader'] |- }], |- }, |- plugin:[ |- new HtmlWebpackPligin({ |- //复制'./src/index.html'文件，并自动引入打包输出的资源文件（js/css） |- template:'./src/index.html', |- }) |- ]+ |- devServer:{+ |- //自动运行项目目录（构建后的目录）+ |- contentBase:path.resolve(__dirname, 'dist'),+ |- //启动gzip压缩（让代码体积更小速度更快）+ |- compress:true,+ |- //指定运行的端口号+ |- port:3000,+ |- //打开默认浏览器+ |- open:true+ |- } |- };2.2、安装webpack-dev-server#
npm i -D webpack-dev-server2.3、启动#
npx webpack-dev-server2.4、配置热更新的npm script脚本#
package.json "scripts": { "start": "webpack serve --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js" },