webpack随笔

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",