webpack 之，9 开发环境基本配置

重点:开发环境只需要能让代码运行起来即可

提问:为什么没有css文件打包呢?

答:因为css文件内容打包到了built.js文件中,会自动加内容加载在index.html中的

提问:css打包在js中会出现闪屏现象吗?为什么?

答:css在js中,这样js文件体积变得非常大,下载就会非常慢,因为是先加载js,先执行js代码,然后创建style标签加载在页面中,那么页面就会出现闪屏现象,所以需要将css文件内容从js中提取出来

webpack难点就在写错的地方都不好排查

package.json 的 包没有下载或者不包含,或者是在module对象中例如处理其他资源的排除内容没写全也会有问题

目前这个是完整的,可执行的

"dependencies": {
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.35.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },

有以下几个点:

entry:是入口文件,打包从这里开始

output:是表示所有打包的文件都在这个目录build下

在其他的地方有outputPath:是表示这一类的文件打包到build/imgs下

/* 
开发环境配置:能让代码运行起来
 运行项目指令:
    webpack  会将打包输出出去
    npx webpack-dev-server 只会从内存中编译打包,没有输出

*/
const {resolve} = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
//作用是每次打包的时候清除打包后的文件,webpack重新打包
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports ={
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',  //输出
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test:/\.less$/,
        use: [
          'style-loader',
          'css-loader',
          //将less文件编译成css文件
          //需要下载less-loader和less
          'less-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        //还需下载 file-loader
        loader:'url-loader',
        options: {
          //图片大小小于8kb,就会被base64处理
          //优点:减少请求数量(减轻服务器压力)
          //图片体积会更大
          limit:8*1024,
          /* 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
          解析时会出问题:[object Module]
          //解决:关闭url-loader的es6模块化,使用commonjs解析
          */
          esModule:false,
          /* 
          [hash:10]取图片的hash的前10位
          [ext]取文件原来扩展名
          */
          name: '[hash:10].[ext]',
          outputPath:'imgs' //输出到哪个目录
        }
      },
      //打包其他资源(除了html/js/css资源外的资源)
      {
        //排除一下资源,其他资源进行打包
        exclude:/\.(css|js|html|less|jpg|png|gif)$/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]',
          outputPath:'media' //输出到哪个目录
        }
      },
      {
        test:/\.html$/,
        //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader:'html-loader',
      }
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebPackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}