webpack随笔

Posted 2021-09-12 阿曾的奶油汤

webpack 默认只打包js文件

入口文件配置

1. 单个js

   entry:\'./index.js\'

2. 多个入口打包成一个js，array格式

   entry:[\'./a.js\',\'./b.js\']

3. 多个入口打包成多个js，name为key

   entry:{pageone:\'./a.js\',pagetwo:\'./b.js\'}

webpack 打包html文件

正常打包单页面html

1. 使用插件（plugins）对HTMl文件进行打包（html-webpack-plugin）
2. 安装依赖 npm i html-webpck-plugin -D
3. 引入 const HtmlWebpackPlugin = require(\'html-webpck-plugin\')

4. 使用

   plugins:[
    new HtmlWebpackPlugin({
        // 已template中的html作为模版，自动引入了打包后的css/js
        template:\'./src/index.html\',
        // 输出文件名
        filename: \'demo,html\',
        // 需要引入的js文件,引入顺序从后往前
        chunks: [\'common\',\'vendor\'],
    }),
   ],

webpack 打包css文件

正常打包css文件

1. 是在module中配置loader
2. 安装依赖： npm i css-loader style-loader -D
3. 编写css文件时，需要在打包的js中引入css

4. 使用

    module: {
    rules: [
        {
            // 正则匹配文件
            test: /\\.css$/,
            // 使用哪些loader
            use: [
                 // loader执行顺序：从右往左、从下往上
                 \'style-loader\', // 打包后自动插入html中
                 \'css-loader\'
            ]
        }
     ]
   }

打包less、scss文件

1. 使用方式与css相同，只需添加相对应的依赖
2. less-loader、sass-loader得写在css-loader下面先进行打包

打包css为单独文件

1. 使用插件 npm i mini-css-extract-plugin
2. 引入插件 const MiniCssExtractPlugin = require(\'mini-css-extract-plugin\');

3. 在plugins模块中使用插件

   plugins: [new MiniCssExtractPlugin({
      filename: \'index.css\',
    })]

4. 在css的rules中使用MiniCssExtractPlugin

    module: {
    rules: [
        {
            // 正则匹配文件
            test: /\\.css$/,
            // 使用哪些loader
            use: [
                 // loader执行顺序：从右往左、从下往上
                 MiniCssExtractPlugin.loader
                 \'css-loader\'
            ]
        }
     ]
   }

5. 会打包后生成一个css文件并且在html中外链引入

处理css兼容浏览器内核

1. 下载postcss-loader,npm i postcss-loader -D
2. css-loader前添加postcss-loader

3. 新建postcss.config.js文件

   module.exports = {
    plugins: {
        autoprefixer: { browsers: [\'ie>9\', \'>1% in CN\'] }, // 浏览器版本
    }
   }
   

压缩css文件

1. 下载并引入插件 const OptimizeCSSAssetsPlugin = require(\'optimize-css-assets-webpack-plugin\');

2. 使用插件

   plugins: [new OptimizeCSSAssetsPlugin()]

打包图片资源

css等文件中的图片资源

1. 下载url-loader

2. 配置

   module: {
    rules: [
       {
        test: /\\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: \'url-loader\',
            options: {
              limit: 8192, //小于这个数时，会转成base64
              name: \'images/[name][hash:8].[ext]\', //输出到文件夹,基于output根目录 [ext]:保留原格式 [name]:保留文件名 [hash:8]:添加8位hash
            },
          },
        ],
      },
     ]
   }

html中的图片资源

1. 下载html-loader

2. 配置

   module: {
    rules: [
       {
        test: /\\.html$/,
        loader: \'html-loader\',
        },
     ]
   }

webpack打包其他资源（字体包）

1. 下载file-loader

2. 配置

   module: {
    rules: [
       {
        test: /\\.(woff(2)?|ttf|eot)$/,
        use: [
          {
            loader: \'file-loader\',
            options: {
              name: \'[name].[ext]\',
              publicPath: \'../fonts/\',
              outputPath: `fonts/`,
          },
        ],
      },
     ]
   }

file-loader和url-loader区别

1. file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。
2. url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

webpack热更新

1. 下载webpack-dev-serve

2. package.json中配置

   "dev": "cross-env NODE_ENV=development webpack-dev-server --open --config build/webpack.dev.js --inline --host 0.0.0.0",