webpack

webpack的基本配置

webpack的基本配置

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

webpack中文网

webpack官网

webpack做了什么

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

webpack模块说明

和nodejs不同，webpack会把所有的资源都当成模块

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

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

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

webpack 4.x 使用步骤

1. 创建项目目录

  • dist 打包后的文件目录
  • src 项目源代码

2. 项目初始化

1
2
3
yarn init -y
# 或
npm init -y

3. 安装 webpack 和 webpack-cli

1
2
3
yarn add webpack webpack-cli -D
# 或者
npm i webpack webpack-cli --save-dev
  • save 用来记录到package.json内的dependencies对象中
  • save-dev 用来记录到package.json内的devDependencies对象中
  • dependencies和devDependencies的区别在于前者是项目中依赖的包；而后者只是开发中依赖的包，上线后不再需要。如果装错了位置只需要在package.json中移动一下就好。
  • yarn中不能使用–save-dev

4. 配置package.json中的scripts

1
2
3
"scripts": {
  "build": "webpack ./src/index.js -o ./dist/bundle.js --mode=development"
},
  • “scripts” 作用是将bash语句简写成一个自定义脚本命令，执行方法 npm run 命令名
  • 打包语法: webpack 需要打包的文件路径 -o 打包后的文件路径
  • --mode=development的作用是以未压缩模式打包，压缩模式应该为--mode=production，不过一旦配置的内容复杂起来，就不会在这里写，这里只写webpack。所有配置内容放在当前目录下的webpack.config.js中。

5. 使用命令

1
2
3
yarn build  # 就可以使用webpack进行打包了
# 或者
npm run build
  • npm中，start和stop命令名可以在执行时省略run
  • yarn中，所有命令都可以省略run

配置文件-webpack.config.js

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

  • 在项目的根目录下面新建webpack.config.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 这是一个nodejs文件
const path = require('path')

module.exports = {
  // 设置入口文件，打包哪个文件
  entry: path.join(__dirname, 'index.js'),
    
  // 设置出口，打包到哪里去
  output: {
    // 设置输出目录，必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件
    filename: 'bundle.js'
  }
}
  • 执行命令
1
webpack  // webpack会自动读取当前目录下的配置文件
  • 模式的配置
1
2
3
4
5
6
module.exports = {
  // 设置打包的模式
  // production
  // development  
  mode: 'production'
}

webpack-插件：html-webpack-plugin

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

html-webpack-plugin插件就是用来处理html文件的

  • 安装
1
yarn add html-webpack-plugin -D
  • 引入
1
var HtmlWebpackPlugin = require('html-webpack-plugin');
1
2
3
4
5
6
7
8
// 插件配置内容
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html')
        })
    ],
}

webpack-loaders

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

css-loader 处理css文件

  • 安装
1
yarn add style-loader css-loader -D
  • 配置

index.js

1
require('./css/index.css')

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
module: {
  // loader的规则
  rules: [
    {
      // 正则表达式，用于匹配所有的css文件
      test: /\.css$/,
      // css-loader只能让webpack解析css文件
      // style-loader才能在html中动态创建style标签作用于页面
      // loader的使用顺序是从右往左的
      use: ["style-loader", "css-loader"]
    }
  ]
},

less-loader 处理less文件

  • 安装 less-loader 和 less
1
npm install --save-dev less-loader less
  • 配置
1
2
3
4
5
6
{
    // 匹配所有的less文件
    test: /\.less$/,
    // 注意除了需要less-loader以外，还需要css-loader和style-loader
    use: ["style-loader", "css-loader", "less-loader"]
}

file-loader 处理图片文件

file-loader可以处理任意文件，当然也可以处理图片。同时最好对每个文件单独配置。

  • 安装
1
npm install --save-dev file-loader
  • 配置
1
2
3
4
5
{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
    use: "file-loader"
}

file-loader会以单独文件的形式打包到dist目录，每个图片独立存在，请求次数会变多

url-loader 处理图片文件

url-loader与file-loader一样，也可以处理图片，但是url-loader可以以base64编码的方式处理图片，这样就可以打包到bundle.js中。

  • 安装
1
npm install --save-dev url-loader
  • 设置limit参数

注意：设置了url-loader后就不要再设置file-loader了，超过了limit后会自动使用file-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                // 限定文件大小，注意：如果文件超出了大小，会自动调用file-loader，所以安装url-loader都要安装file-loader
                limit: 8192 // 8*1024B
            }
        }
    ]
}
  • base64和精灵图的区别：
    base64：优点是可以减少网络请求，缺点是会增加文件30%的大小，一般只用于小图片的转换
    精灵图：同样可以减小网络请求，缺点是不好修改和使用

url-loader 处理字体图标文件

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

  • 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  // 配置字体图标加载
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        // 限定文件大小
        limit: 8192
      }
    }
  ]
}

babel-loader 处理高版本的ES语法

介绍

Babel 是一个 JavaScript 编译器。

官网

中文网

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

使用

  • 安装（注意webpack版本号）
1
npm install -D babel-loader @babel/core @babel/preset-env
  • 配置
1
2
3
4
5
6
7
8
{
    test: /\.js$/,
    // 不解析node_modules(npm)文件夹以及bower_components(bower)文件夹内的内容
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader'
    }
}

webpack-dev-server的使用

在开发期间，会用到webpack的一个辅助包：webpack-dev-server，它会在内存中打包，并会根据源文件的修改而更新包，内存中读写速度更快而且比手动打包性能消耗更小。

官网

webpack-dev-server 的作用

  • 自动开启http服务

  • 自动打开浏览器

  • 自动监视文件的变化

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

基本使用

  • 安装
1
npm install --save-dev webpack-dev-server
  • 配置(package.json)
1
2
3
4
// webpack-dev-server提供了一个简单的服务器，并且能够实时重新加载
"scripts": {
  "dev": "webpack-dev-server"
}
  • 其他配置(webpack.config.js)
1
2
3
4
5
6
devServer: {
  // 端口号
  port: 9999,
  // 自动打开浏览器
  open: true,
}

热更新的说明

热更新的好处

  • 开启
1
2
3
4
devServer: {
  // 热更新，差异化更新
  hot: true
}
  • 热更新有时会出现监视不到文件更新的情况（例如只用插件加载的html），这时需要手动刷新或者：
1
2
3
4
5
6
7
8
var webpack = require("webpack");

plugins: [
    new HtmlWebpackPlugin({
        template: path.join(__dirname,"src", 'index.html')
    }),
    new webpack.HotModuleReplacementPlugin()
],
  • 热更新与dev-server模式不会在生产环境下用，生产环境还是需要使用 npm run build