webpack基础用法

webpack

• webpack是一种前端资源构建工具，一个静态模块打包器，在webpack看来，前端所有资源文件都会作模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源
• 使用 npm 安装 webpack 同时需要安装 webpack-cli
• npm install webpack webpack-cli -D

webpack五个核心概念

• Entry 入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
• Output 指示webpack打包后的资源bundles输出到哪里
• Loader 让webpack能够处理那些非js文件
• Plugins 插件功能，可以用于打包优化和压缩，重新定义环境变量等功能
• Model 指示webpack使用相应模式的配置
  • development 能让代码本地调试运行的环境
  • production 能让代码优化上线运行的环境

webpack打包css

• 分别用到3个包less-loader,css-loader,style-loader
• 还需要下载less

webpack打包html

• 下载html-webpack-plugin

webpack.config.js

• webpack的配置文件
• 所有构建工具都是基于node.js平台运行的，模块化操作默认采用commonjs
• webpack只能理解javascript和json文件，loader让webpack能够去处理其他类型的文件，并将他们转为有效的模块

//用来拼接路径
const {resolve} = require('path')
module.exports = {
  //入口起点
  entry: './src/index.js',
  //输出
  output: {
    //输出文件名
    filename: 'built.js',
    //输出路径
    path: resolve(__dirname,'build')
  },
  //loader的配置
  module: {
    rules: [
      //详细loader配置
      {
        //打包css资源
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          //下载less-loader还得下载less
          //将less转化成css
          'less-loader'
        ],
      }
    ]
  },
  // plugins的配置
  pligins: [

  ],
  //模式
  mode: 'development',
  //mode: 'production'
}

ESmodules 和 CommonJS

• ESmodules中可以导入Commonjs模块
• CommonJS中不能导入ESmodules模块
• CommonJS始终只会导出一个默认成员
• 注意import不是解构导出对象

图片打包

• 安装url-loader插件
• 小文件使用Data URLs,减少请求次数
• 大文件单独提取存放，提高加载速度

webpack处理es6转换

• 引入babel-loader，@babel/core，@babel/preset-env

webpack兼容多种模块化标准

• 遵循ESmodules标准的import声明
• 遵循CommonJS标准的require函数
• 遵循AMD标准的define函数和require函数
• 样式代码中的@import指令和Url函数
• HTML代码中图片标签的src属性

webpack 插件

• 自动清除输出目录插件clean-webpack-plugin
• 自动生成使用bundle.js的HTML插件html-webpack-plugin
• 拷贝文件到其他路径下clean-webpack-plugin

自动更新打包数据

• 运行webpack --watch 监控包变化
• 可以利用browser-sync监控浏览器变化 browser-sync dist --files "**/*"

webpack Dev Server

• 集成自动编译和自动刷新浏览器等功能
• 支持配置代理

source Map

• 解决调错
• eval-是否使用eval执行代码
• cheao-Source Map 是否包含行信息
• module-是否能够得到Loader处理之前的源代码
• 在开发环境下选择cheap-module-eval-source-map
• 生产模式下选择none或者nosources-source-map

webpack HMR

• 应用运行过程中实时替换某个模块，应用状态不受改变
• HMR是webpack中最强大的功能之一
• 极大程度提高开发者效率

开启HMR

• 安装webpack-dev-server模块
• 运行webpack-dev-server --hot

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  //引入模块
  const webpack = require('webpack')
  module.exports = {
    mode: 'none',
    entry: './src/main.js',
    output: {
      filename: 'js/bundle.js'
    },
    devtool: 'source-map',
    // 打开热更新
    devServer: {
      hot: true
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|jpe?g|gif)$/,
          use: 'file-loader'
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack Tutorial',
        template: './src/index.html'
      }),
      //配置HMR
      new webpack.HotModuleReplacementPlugin()
    ]
  }
  

HMR APIs

• 处理js热替换的方法
• 处理图片热替换的方法

  // HMR 手动处理模块热更新
  // 不用担心这些代码在生产环境冗余的问题，因为通过 webpack 打包后，
  // 这些代码全部会被移除，这些只是开发阶段用到
  if (module.hot) {
    let hotEditor = editor
    module.hot.accept('./editor.js', () => {
      // 当 editor.js 更新，自动执行此函数
      // 临时记录编辑器内容
      const value = hotEditor.innerHTML
      // 移除更新前的元素
      document.body.removeChild(hotEditor)
      // 创建新的编辑器
      // 此时 createEditor 已经是更新过后的函数了
      hotEditor = createEditor()
      // 还原编辑器内容
      hotEditor.innerHTML = value
      // 追加到页面
      document.body.appendChild(hotEditor)
    })
    module.hot.accept('./better.png', () => {
      // 当 better.png 更新后执行
      // 重写设置 src 会触发图片元素重新加载，从而局部更新图片
      img.src = background
    })
    // style-loader 内部自动处理更新样式，所以不需要手动处理样式模块
  }
  

webpack DefinePlugin

• 替换路径

tree-shaking

• 去除多余的代码
• 生产模式下自动启用