webpack学习之旅-01节

努力的Greatiga

发布于 2022-07-25 10:13:33

2270

发布于 2022-07-25 10:13:33

文章被收录于专栏：前端开发与网站建设

前言

为什么突然想认真学一下webpack？

1 理解框架的需要

目前主流框架 Vue、React等都基于此，因此学一下基本使用时必要的

2 新框架开发需要

最近打算开发一个基于 html5、canvas 的小框架，涉及到页面频繁调试、浏览器兼容等；另外，开发过程中经常使用 import、ES6。如果直接基于 html + js + css来开发，那么效率很低还要处理很多兼容问题。
我们可以看到 webpack 的优势

随意使用 import、ES6: 通过打包注入 html 即可，使用 Babel 转译为 ES5 来兼容旧的浏览器
使用 sass、less 等，使用 loader 进行处理生成 css 即可。另外，使用一些 plugins 给 css 加入不同浏览器前缀，以此来兼容
使用热重载，这是最重要的，特别对于重复调整页面的前端来说！只需 ctrl+s 就可以自动刷新页面。

前言小结

基于以上几点，webpack 的使用时必需的，它会极大的加快开发效率，减少一些不必要的开发成本，从而将开发重心集中于框架本身的开发测试上。

webpack 基础

1 安装和配置文件

1.1 安装

npm install webpack webpack-dev-server -S

webpack: 核心文件
webpack-dev-server: 服务器板块，用于开发模式 development

1.2 配置文件

新建文件 webpack.config.js

module.exports = {
  //....
}

2 入口 entry

entry 指定入口文件，也就是告诉 webpack 应该从哪个文件开始读取

const path = require("path");

module.exports = {
  entry: "index.js"
}

3 出口 output

output 指定输出文件的位置，名称

filename: 指定输出的文件名；可以使用 [name].js 来保留文件原有名，当然也可以定义新的名字

const path = require("path");

module.exports = {
  entry: "index.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
}

4 loader

4.1 作用

webpack 只能处理 javascript 和 json，所以需要依靠外部模块来处理其他文件。通常是放在 module 的 rules 属性中，以数组形式排列。
每一组 loader 有以下常见属性

test: 使用正则表达式匹配要处理的文件类型
use: 所使用的的 loader，可以是单个，也可以是数组形式的多个 loader
exclude: 排除指定文件，不处理

4.2 示例

const HtmlWepackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const path = require("path");

module.exports = {
  //...出口, 入口配置
  // loader
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader" ,
        ],
      },
    ],
  },
}

4.3 常见 loader

css-loader: 处理 js 文件中引用的 css 文件
style-loader: 将 js 文件中引用的 css 文件变为 style 标签 (注意: 该 loader 与 mini-css-extract-plugin 冲突，只能使用其中一个)
sass-loader: 将 scss 文件编译为 css 文件
babel-loader: 将 ES6 转译为 ES5
mini-css-extract-plugin: 将处理之后的 css/scss/less 打包成单独文件，并注入到 html 中，与 style-loader 冲突，因此使用 mini 时删除 style-loader

5 plugins

5.1 作用

插件，可以对文件作进一步处理，整合、注入等等

5.2 示例

const HtmlWepackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const path = require("path");

module.exports = {
  //...出口、入口、loader配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css"
    }),
    new HtmlWepackPlugin({
      filename: "index.html",
      template: "./src/index.html",
    }),
  ],
}

6 devServer

6.1 作用

来源于 webpack-dev-server，是 webpack 提供的服务器模块，可以将打包生成后的文件放置与临时创建的 http 服务上，采可直接通过 ip:port 访问

6.2 常见属性

static: 指定服务来源的静态资源文件
port: 服务开启端口
hot: true/false，是否开启热重载

6.3 示例

const HtmlWepackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const path = require("path");

module.exports = {
  //...出口、入口、loader、plugins配置
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    hot: true,
  },
}

7 完整示例

const HtmlWepackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    hot: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css"
    }),
    new HtmlWepackPlugin({
      filename: "index.html",
      template: "./src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader" ,
        ],
      },
    ],
  },
};