webpack安装及常用插件配置

---

title:webpack笔记

webpack

• 简介:
  Webpack是一个基于node开发的模块加载兼打包工具（模块打包器），可以将js、jsx、coffee、样式sass、less，图片等作为模块来使用和处理。
• 特点:
  • 1. 将依赖树拆分成按需加载的块，初始化加载的耗时尽量少
  • 2. 各种静态资源都可以视作模块，将第三方库整合成模块
  • 3. Webpack 本身只能处理原生 JavaScript 模块，但loader 转换器可以将各种类型的资源转换成JavaScript 模块
  • 4.适合大项目，无论是单页还是多页的 Web 应用
• 工作方式：
  • 把项目当做一个整体，从给定的主文件（如：index.js）文件开始找到项目所有依赖文件，用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件.
• 安装：
  • 1npm init 生成package.json文件
  • 2.npm install webpack webpack-cli --save–dev或npm i webpack webpack-cli -D
  • 3.检测是否安装成功：node_modules.bin\webpack -v
  • 4.查看包的所有版本：npm view 包名 verdions
  • 注：在使用webpack时，工程项目名字不能叫webpack
• 具体使用(模块打包)：
  • 1.命令行
    • node_modules.bin\webpack 主入口文件路径 -o 打包后输出的文件路径 --mode=模式（development、production）
    • 如：node_modules.bin\webpack src\index.js -o dist\index.js --mode=development
  • 2.配置文件（推荐）

    • 默认找项目目录下名为 webpack.config.js的配置文件

    • 四个核心概念：

      • 1.入口(entry)
      • 2.输出(output)
      • 3.loader
        • (babel版本注意：npm i babel-loader@7.1.5 babel-core)babel-preset-env
      • 4.插件(plugins)

    • [1]默认是找项目目录下名称为 webpack.config.js 的配置文件（本身就是一个node模块），内容如下：

      module.exports = {
          // 入口文件
          entry: './src/index.js',
      
          // 打包后输出
          output: {
              // 文件名称
              filename: 'index.js',
              // 文件所在的目录的绝对路径（以盘符开头）
              path: __dirname+'/dist'
          },
      
          // 模式
          mode: 'development'
      
          // 加载器
      
          // 插件
      }
      

    • [2] 加载器

      • 1.babel加载器
        • 安装：npm i babel-loader@7.x.x babel-core -babel-preset-env -D
        • 在 webpack.config.js中添加 module 选项

      export.default = {
         ...,
         module: {
             // rules 加载器规则，是一个数组
             rules: [
                 // 加载器规则：指定哪些文件使用哪个加载器
                 {
                     test: /\.js$/,
                     exclude: /node_modules/, // exclude指定目录下的文件不使用该加载器
                     use: { loader: 'babel-loader'}
                 }
             ]
         }
      }
      

      • 2.图片加载器
        • 图片：
          • 转为base64编码 -字符串（只适合小图片） url-loader
          • 作为图片文件 file-loader

      /* 图片加载器
      url-loader: base64编码的字符串图片
      file-loader：图片文件*/
      {
          test: /\.(gif|jpe?g|png)$/,
          use: {
              loader: 'url-loader',
              options: {
                  limit: 1024*8, // 限制在8kb以下使用base64编码
                  fallback: 'file-loader' // 超过8kb则使用file-loader加载器
              }
          }
      }
      

    • [3] 插件

      • 1.CopyWebpackPlugin 复制插件
        • 安装：npm install --save-dev copy-webpack-plugin

      const CopyWebpackPlugin=require('copy-webpack-plugin');
      export.default = {
         ...,
         plugins:[
             //    不需要经过webpack打包，而是复制到output.path指定的输出目录之下
             new  CopyWebpackPlugin([
                 //to会复制到output下path路径下 to：｛output.path｝/static
                 {from:'static',to:'static'}
             ])
         ]
      }
      

      • 2.HtmlWebpackPlugin 简化了HTML文件的创建 无需引入html
        • 安装：npm install --save-dev html-webpack-plugin

      const HtmlWebpackPlugin=require('html-webpack-plugin');
      export.default = {
          ...,
          plugins:[
              new HtmlWebpackPlugin({
              title:'Hello Webpack',//标题
              filename:'webpack.html',//文件名
              favicon:'static/favicon.ico',//图标
              template:'./src/index.html',//模板 需mode: 'production',
              minify:{//压缩
                  // 去除空白压缩为一行
                  collapseWhitespace:true
              }
          })
          ]
      } 
      

      • 3.MiniCssExtractPlugin 将CSS提取到单独的文件中。
        • 为每个包含CSS的JS文件创建一个CSS文件。基于新的webpack v4功能（模块类型）构建 只用在production配置中
        • 安装：npm install --save-dev mini-css-extract-plugin

      const MiniCssExtractPlugin = require("mini-css-extract-plugin");
      module: {
          // rules 加载器规则，是一个数组
          rules: [
          ...,
              // 生成独立的css文件
              {
                  test: /\.css$/,
                  use: [MiniCssWebpackPlugin.loader, 'css-loader']
              },
              {
                  test: /\.less$/,
                  use: [MiniCssWebpackPlugin.loader, 'css-loader', 'less-loader']
              },
          ]
      },
      // 插件
      plugins: [
          ...,
          new MiniCssWebpackPlugin({
              filename: 'style.css'
              // filename: '[name].css'
          })
      ]
      

      • 4.clean-webpack-plugin 清理插件
        • webpack 将生成文件并放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。
        • 通常比较推荐的做法是，在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。
        • 安装：npm install --save-dev clean-webpack-plugin （未指定版本默认最新版，最新版需要解构赋值，不用解构报错 不是最新版不需要用解构赋值）
        • 打包后发布dist中的内容，

      const {CleanWebpackPlugin} = require('clean-webpack-plugin');
      plugins: [
          ...,
          // 清空dist目录
          new CleanWebpackPlugin()
      ]
      

    • [4] webpack开发中服务器（webpack-dev-server）

      • webpack-dev-server 为你提供了一个简单的 web server，并且具有热更新(实时重新加载)功能。
      • 开发阶段使用开发依赖，mode: ‘development’
      • 安装：npm install --save-dev webpack-dev-server
      • 配置：

      package.json "scripts"中添加 "start": "webpack-dev-server"  
      webpack.config.js中添加
          devServer:{
              // port:
          }
      

      • 开启：npm run start（开启服务器）