webpack简单使用笔记

webpack概述

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler )

webpack中文网

webpack官网

webpack做了什么

1. 语法转换
   • less/sass转换成css
   • ES6转换成ES5
   • typescript转换成js
2. html/css/js代码的压缩与合并（打包）
3. webpack可以在开发期间提供一个开发环境
   • 自动开启浏览器
   • 自动监视文件变化
   • 自动刷新浏览器
4. 项目一般都需要经过webpack打包之后才上线。

webpack模块说明

webpack会把所有的资源都当成模块

• css
• js
• 图片
• 字体图标

webpack给前端开发提供了模块化的开发环境

• 对于js文件，webpack中支持AMD、CMD、commonJS、ES6模块化等语法
• 有了webpack，我们可以在前端代码中使用任意的模块化语法
• 可以在浏览器中使用nodejs的模块化语法const $ = require('jquery')

webpack使用步骤

• 项目初始化

yarn init -y

• 安装

yarn add webpack webpack-cli -D  

• 配置scripts

  "scripts": {
    "build": "webpack index.js -o ./dist/bundle.js"
  },

• 使用命令

yarn build  // 就可以使用webpack进行打包了, 使用 npm run build 也行

配置文件-webpack.config.js

如果所有的参数都拼接到webpack-dev-server的后面，非常的麻烦，因此可以提供webpack.config.js来进行配置

• 在项目的根目录下面新建webpack.config.js文件

const path = require('path')
// 这是一个nodejs文件
module.exports = {
  // 设置入口文件
  entry: path.join(__dirname, 'index.js'),
  // 设置出口
  output: {
    // 设置输出目录
    path: path.join(__dirname, 'dist'),
    // 输出文件
    filename: 'bundle.js'
  }
}

• 执行命令

webpack  // webpack会自动读取当前目录下的配置文件

• 模式的配置

// 设置打包的模式
//'production'
//development  
mode: 'production'

webpack-插件

webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。

• 安装

yarn add  html-webpack-plugin -D

• webpack.config.js导入

var HtmlWebpackPlugin = require('html-webpack-plugin');

• 使用

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html')
        })
    ],
}

webpack-loaders

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

css-loader处理css文件

• 安装

npm install --save-dev style-loader css-loader

• 配置

  module: {
    // loader的规则
    rules: [
      {
        // 正则表达式，用于匹配所有的css文件
        test: /\.css$/,
        // 使用什么样的loader进行解析
        use: [ "style-loader", "css-loader"]
      }
    ]
  },

less-loader处理less文件

• 安装

npm install --save-dev less-loader less

• 配置

{
    // 匹配所有的less文件
    test: /\.less$/,
        use: [ "style-loader", "css-loader", "less-loader"]
}

file-loader处理图片文件

• 安装

npm install --save-dev file-loader

• 配置

{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
    use: "file-loader"
}

url-loader处理图片文件

url-loader与file-loader一样，也可以处理图片，但是url-loader可以以base64编码的方式处理图片

• 安装

npm install --save-dev url-loader

• 配置

{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader'
            }
        ]
}

• base64的优点

1. 精灵图的作用：减小网络请求
2. base64:减少网络请求  通过京东查看base64编码的图片

• 设置limit参数

{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    // 限定文件大小，注意：如果文件超出了大小，会自动调用file-loader，所以安装url-loader通过都要安装file-loader
                    limit: 8192
                }
            }
        ]
}

url-loader处理字体图标文件

处理字体图标文件与处理图标一模一样

• 配置

{
    // 配置字体图标加载
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    // 限定文件大小
                    limit: 819200
                }
            }
        ]
}
           

babel处理高版本的ES语法

介绍

Babel 是一个 JavaScript 编译器。

今天就开始使用下一代 JavaScript 语法吧！

官网

中文网

babel可以把最新版本的语法编译成浏览器能够兼容的代码（ES5）

使用

• 安装

npm install -D babel-loader @babel/core @babel/preset-env

• 配置

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader'
    }
}

webpack-dev-server的使用

在开发期间，会用到webpack的一个辅助包：webpack-dev-server,

webpack-dev-server的作用

• 自动开启http服务

• 自动打开浏览器

• 自动监视文件的变化

• 引入，每次修改代码，都需要重新打包

基本使用

• 安装

npm install --save-dev webpack-dev-server

• 配置

  // webpack-dev-server提供了一个简单的服务器，并且能够实时重新加载
  devServer: {
    
  }

• 其他配置

  devServer: {
     port: 9999,
     open: true,
  }

热更新的说明

• 开启

hot: true

• 配置

var webpack = require("webpack");

plugins: [
    new HtmlWebpackPlugin({
        template: path.join(__dirname,"src", 'index.html')
    }),
    new webpack.HotModuleReplacementPlugin()
],

• 热更新与dev-server模式不会在生产环境下用，生产环境还是需要npm run build

ES6模块化

在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提供了简单的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

基本使用

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。

es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能

// a.js
export const name = 'hucc'
export const age = 18
export const desc = '很帅'

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）

//main.js
import {name, age, desc} from './a.js'
console.log('从模块内部导出的内容:', name, age, desc)

export详解

上面介绍了模块化最基础的用法，export 不止可以导出函数，还可以导出对象，数组，字符串等等

//a.js
export const name = 'hucc'
export const arr = [1, 2, 3]
export const obj = {
  name: 'zs',
  age: 18
}

export的写法，除了像上面这样，还有另外一种。

//a.js
const name = 'hucc'
const arr = [1, 2, 3]
const obj = {
  name: 'zs',
  age: 18
}

//	优点：上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。 
export {name, arr, obj}

export default 指定默认输出, import 无需知道变量名就可以直接使用

//a.js
export default function fn () {
  console.log('哈哈')
}

//main.js
//在导入时，可以随意的使用变量名来接收
import a from './a'
a()

注意：export default是常用的语法，用的很多, 以一些常用的模块为例

import $ from 'jQuery'   // 加载jQuery 库
import _ from 'lodash'   // 加载 lodash
import moment from 'moment' // 加载 moment

import详解

import 为加载模块的命令，基础使用方式和之前一样

//main.js
import {name, arr, user} from './a'

//如果是export default导出的内容
import a from './a'

兼容性说明

上面介绍了，es6 中模块的使用方式，但是现在es6的模块化，无论在浏览器端还是 node.js 上都没有得到很好的支持，所以需要，一些转码的工具（babel）。使我们可以用es6的方式来编码，最后输出es5的代码。