webpack学习记录

梦里梦外; 2022-12-21 04:56 76阅读 0赞

下载webpack:

>  npm install   webpack webpack -D

>  终端使用：webpack ./src/entry.js -o  ./dist/bulid.js   --mode=development 开发环境开发
> 
>                    webpack ./src/entry.js -o  ./dist/bulid.js   --mode=production 生产环境开发

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70][]

>  用webpack.config.js配置打包文件:webpack

打包前文件：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1][]

打包之后的文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 2][] 效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 3][]

> 打包图片：

/* loader:1.下载 2.使用（配置loader）
      plugins:1下载 2.引入 3.使用
    */
    const {resolve} =require('path');
    const HtmlWebpackPlugin=require('html-webpack-plugin');
    module.exports={
        entry:{
            //输入文件名字入口
            entry:'./src/index.js'
        },
        output:{
            publicPath: './',
            //输出文件名字
            filename:'bundle.js',
            //输出路径 __dirname当前得文件得绝对路径
            path:resolve(__dirname,'build')
        },
        module:{
         rules:[
             //详细loader配置
                 {
                     //匹配那些文件 加载css
                   test:/\.css$/,
                   use:[
                       //use数组中loader执行顺序是:从右到左，从下到上 依次执行 
                       //创建style标签 将js中的样式资源插入进行 添加到head中生效
                       'style-loader',
                       //将css变成commonjs模块加载js中 里面的内容是样式字符串
                       'css-loader'
                    ]   
                 },
                 //加载less
                 {
                     test:/\.less$/,
                     use:[
                         'style-loader',
                         'css-loader',
                         'less-loader'
                     ]
                 },
                 //加载图
                 {
                     test:/\.(jpg|png|gif)/,
                     loader:'url-loader',
                     options:{
                         //图片大小小于8kb，就会被base64处理
                         //优点:减少请求数量(减轻服务器压力)
                         //缺点:图片体积会更大(文件请求速度更慢)
                         limit:15*1024,
                         //问题:因为ur1-loader默认使用es6模块化解析， 而html -1oader引入图片是commonjs
                         //解决:关闭url-loader的es6模块化， 使用commonjs解析
                         esModule:false,
                         //给图片进行重命名
                         // [hash: 10]取图片的hash的前10位
                         // [ext]取文件原来扩展名
                         name:'[hash:7].[ext]'
                     }
                 },
                 //html中的img
                 {
                     test:/\.html$/,
                     //处理html中的img图片 （负责引入img 从而能被url-loader 进行处理）
                     loader:'html-loader'
                 }
    
         ]
        },
        //plugins得配置
        plugins:
            [
            //详细得plugin的配置
            //html-webpack-plugin
            //功能：默认会创建一个空的HTML,自动的引入打包输出的所有资源（JS/CSS）
            //需求：需要结构化的HTML文件
            new HtmlWebpackPlugin({
                //复制 ./src/index.html文件  并自动的引入打包输出的所有资源（JS/CSS）
                template:'./src/index.html'
            })
            ],
         
        mode:'development',//开发模式
        // mode:'production',
    }

打包前：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 4][]

打包之后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 5][]

>  打包其他资源 ：
> 
>  \{  
>         // 处理其他资源  
>         exclude: /\\.(html|js|css|less|jpg|png|gif)/,  
>         loader: 'file-loader',  
>         options: \{  
>           name: '\[hash:10\].\[ext\]',  
>           outputPath: 'media'  
>         \}  
>       \}
> 
> devServer配置开发资源：
> 
>  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）  
>   // 特点：只会在内存中编译打包，不会有任何输出  
>   // 启动devServer指令为：npx webpack-dev-server  
>   devServer: \{  
>     // 项目构建后路径  
>     contentBase: resolve(\_\_dirname, 'build'),  
>     // 启动gzip压缩  
>     compress: true,  
>     // 端口号  
>     port: 3000,  
>     // 自动打开浏览器  
>     open: true  
>   \}
> 
> 开发环境基本配置：如下

/*
      开发环境配置：能让代码运行
        运行项目指令：
          webpack 会将打包结果输出出去
          npx webpack-dev-server 只会在内存中编译打包，没有输出
    */
    
    const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
          // loader的配置
          {
            // 处理less资源
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            // 处理css资源
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },
          {
            // 处理图片资源
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              // 关闭es6模块化
              esModule: false,
              outputPath: 'imgs'//在build下生成这个ims文件夹存放图片
            }
          },
          //img压缩
          {
                   //处理压缩大的图片  不转换base64的
                   loader:'image-webpack-loader',
                   options:{
                       byPassOnDebug:true,
                       // 关闭es6模块化
                   }
          },
          {
            // 处理html中img资源
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            // 处理其他资源
            exclude: /\.(html|js|css|less|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          }
        ]
      },
      plugins: [
        // plugins的配置
        new HtmlWebpackPlugin({
          template: './src/index.html'
        })
      ],
      mode: 'development',
       // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
      // 特点：只会在内存中编译打包，不会有任何输出
      // 启动devServer指令为：npx webpack-dev-server
      devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true
      }
    };

>  提取css成单独文件 下载：npm i mini-css-extract-plugin -D

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              // 创建style标签，将样式放入
              // 'style-loader', 
              // 这个loader取代style-loader。作用：提取js中的css成单独文件
              MiniCssExtractPlugin.loader,
              // 将css文件整合到js文件中
              'css-loader'
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
          // 对输出的css文件进行重命名
          filename: 'css/built.css'
        })
      ],
      mode: 'development'
    };

>  css兼容处理：
> 
>

/*
                css兼容性处理：postcss --> postcss-loader postcss-preset-env
    
                帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
    
                "browserslist": {
                  // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
                  "development": [
                    "last 1 chrome version",
                    "last 1 firefox version",
                    "last 1 safari version"
                  ],
                  // 生产环境：默认是看生产环境
                  "production": [
                    ">0.2%",
                    "not dead",
                    "not op_mini all"
                  ]
                }
              */
              // 使用loader的默认配置
              // 'postcss-loader',
              // 修改loader的配置
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    // postcss的插件
                    require('postcss-preset-env')()
                  ]
                }
              }

>  压缩css:下载插件：npm i optimize-css-assets-webpack-plugin -D
> 
> const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
> 
>     //plugins得配置
> 
>     plugins:
> 
>         \[
> 
>             //详细得plugin的配置
> 
>             //html-webpack-plugin
> 
>             //功能：默认会创建一个空的HTML,自动的引入打包输出的所有资源（JS/CSS）
> 
>             //需求：需要结构化的HTML文件
> 
>             new HtmlWebpackPlugin(\{
> 
>                 //复制 ./src/index.html文件  并自动的引入打包输出的所有资源（JS/CSS）
> 
>                 template:'./test/index.html'
> 
>             \}),
> 
>             new MiniCssExtractPlugin(\{
> 
>                 filename:'css/build.css'
> 
>             \}),
> 
>             new optimizeCssAssetsWebpackPlugin()
> 
>         \],

/* loader:1.下载 2.使用（配置loader）
      plugins:1下载 2.引入 3.使用
    */
    const {resolve} =require('path');
    const HtmlWebpackPlugin=require('html-webpack-plugin');
    const MiniCssExtractPlugin=require('mini-css-extract-plugin');
    const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
    // 设置nodejs环境变量
    process.env.NODE_ENV = 'development';
    module.exports={
        entry:{
            //输入文件名字入口
            entry:'./test/js/index.js'
        },
        output:{
            publicPath: './',
            //输出文件名字
            filename:'js/bundle.js',
            //输出路径 __dirname当前得文件得绝对路径
            path:resolve(__dirname,'build')
        },
        module:{
         rules:[
             //详细loader配置
                 {
                     //匹配那些文件 加载css
                   test:/\.css$/,
                   use:[
                       //use数组中loader执行顺序是:从右到左，从下到上 依次执行 
                       //创建style标签 将js中的样式资源插入进行 添加到head中生效
                       //    'style-loader',
                       MiniCssExtractPlugin.loader,//代替style-loader 提取js中的css单独形成文件
                       //将css变成commonjs模块加载js中 里面的内容是样式字符串
                       'css-loader'
                    ]   
                 },
                 //兼容
             /*     {
                    loader: 'postcss-loader',
                    options: {
                      ident: 'postcss',
                      plugins: () => [
                        // postcss的插件
                        require('postcss-preset-env')()
                      ]
                    }
                  } */
                 /* 
                  {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    // postcss的插件
                    require('postcss-preset-env')()
                  ]
                }
              }
                 */
         ]
        },
        //plugins得配置
        plugins:
            [
                //详细得plugin的配置
                //html-webpack-plugin
                //功能：默认会创建一个空的HTML,自动的引入打包输出的所有资源（JS/CSS）
                //需求：需要结构化的HTML文件
                new HtmlWebpackPlugin({
                    //复制 ./src/index.html文件  并自动的引入打包输出的所有资源（JS/CSS）
                    template:'./test/index.html'
                }),
                new MiniCssExtractPlugin({
                    filename:'css/build.css'
                }),
                new optimizeCssAssetsWebpackPlugin()
            ],
        mode:'development',//开发模式
    }

>  js兼容性处理: 
> 
>  /\*  
>         js兼容性处理：babel-loader @babel/core   
>           1. 基本js兼容性处理 --> @babel/preset-env  
>             问题：只能转换基本语法，如promise高级语法不能转换  
>           2. 全部js兼容性处理 --> @babel/polyfill    
>             问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~  
>           3. 需要做兼容性处理的就做：按需加载  --> core-js  
>       \*/

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
          /*
            js兼容性处理：babel-loader @babel/core 
              1. 基本js兼容性处理 --> @babel/preset-env
                问题：只能转换基本语法，如promise高级语法不能转换
              2. 全部js兼容性处理 --> @babel/polyfill  
                问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
              3. 需要做兼容性处理的就做：按需加载  --> core-js
          */  
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              // 预设：指示babel做怎么样的兼容性处理
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 按需加载
                    useBuiltIns: 'usage',
                    // 指定core-js版本
                    corejs: {
                      version: 3
                    },
                    // 指定兼容性做到哪个版本浏览器
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

> ### 压缩js /html ： ###

plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
          // 压缩html代码
          minify: {
            // 移除空格
            collapseWhitespace: true,
            // 移除注释
            removeComments: true
          }
        })
      ],
    
    // 生产环境下会自动压缩js代码
      mode: 'production'

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70]: /images/20221120/4537c12fa203449bb696bdb56a196298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1]: /images/20221120/86c1a17907d34b9ea2f9883bcf9fdddb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 2]: /images/20221120/1328700348b04cba87c858eba062f8f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 3]: /images/20221120/2fccd555105c46e7a08b26094836f507.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 4]: /images/20221120/5d93a9d505d743a5ac25138a798bc7a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 5]: /images/20221120/a63debdf0ea049c29076e911fa8b69a8.png