webpack开发环境的使用

╰半夏微凉° 2022-10-06 12:49 52阅读 0赞

## webpack依赖关系图 ##

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center 1]

## 在磁盘中新建目录webpack及其子目录：css、js…,并初始化npm(用于安装各种包、插件) ##

index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center 2]index.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center 3]index.less  
![index.less][]

## 新建webpack.config.js文件，编写webpack配置 ##

webpack.config.js配置如下：

/** * 开发环境的配置：能让代码运行即可 * 运行项目指令：webpack会将打包结果输出出去 * npx webpack-dev-server只在内存中打包，没有输出 */
    
    const { resolve}  = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports={ 
      entry:"./src/js/index.js",
      output:{ 
        path:resolve(__dirname,'build'),
        filename:'./js/bundle.js'
      },
      module:{ 
        rules:[
          //处理less样式资源
         { 
           test:/\.less$/,
           use:['style-loader','css-loader','less-loader'],//loader是按照从右往左、从下往上的执行顺序执行的。
           /** * less-loader讲less文件转化为css文件，然后css-loader将css文件加入到js文件中，style-loader将js文件添加得到style标签内并嵌入到head标签里 */
         },
         //处理css资源
         { 
           test:/\.css$/,
           use:['style-loader','css-loader']
         },
        //处理style样式图片资源
         { 
          test:/\(jpg|png|gif)$/,
          loader:'url-loader',
          options:{ 
            limit:8 * 1024,//当图片大小低于limit的大小时采用base64编码，打包后图片内存大小会变大，一般在图片大小为8-15kb左右时采用limit
            name:'[hash:10].[ext]',//以打包的hash值的前10位作为名称，[ext]后缀和原来保持一致
            esModule:false,//关闭es6的解析模式，采用commonjs的解析模式
            outputPath:'imgs'//输出到img这个文件夹下
          }
         },
         //处理html中的image图片资源
         { 
           test:/\.html$/,
           loaser:'html-loader',//解析模式为commonjs
         },
         //处理其他资源
         { 
          exclude:/\.(css|less|text|js|png|jpg|gif|html)$/,
          loader:'file-loader',//url-loader是file-loader的扩展，多了limit对图片的压缩功能
          options:{ 
            name:'[hash:10].[ext]',
            outputPath:'media'
          }
         }
        ]
      },
      plugins:[new HtmlWebpackPlugin({ template:'./src/index.html'})],
      //自动化实现自动编译打包、输出、打开浏览器
      devServer:{ 
        contenBase:resolve(__dirname,'build'),//指定chunk的目录
        compress:true,
        port:300,
        open:true
      },
      mode:'development'
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210613175456671.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/1e798de4d90843b4a15b9c8149d083f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/4453963cf92d4d2d9f82103738c45529.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/50d13896d379438b89baa67be9bb8aa4.png
[index.less]: /images/20221005/1a0dc0f4c24b43239cc3502e6d357dd0.png