2.Webpack开发环境配置

随便逛逛不说话
938 阅读3分钟

1. 前言

回顾：
webpack初识简单介绍了webpack的五大概念，也一起写了两个例子。我们知道，webpack自身只能处理js, json文件，其他类型的文件需要配合loader 或 plugin；我们还知道，loader 和 plugin 需要先用npm install下载下来 (当然还有其他的下载方式) 。
如果不记得了，可以回去复习一下~

本文将会从文件出发，根据文件的类型去讲如何打包，需要使用哪些loader或plugin。

从篇幅考虑，只会列出必要的代码，完整的代码在这里

2. 资源打包

2.1. 打包样式资源

我们通常使用css, less, sass来编写样式，打包不同类型的样式资源也需要使用不同的loader。

用到的loader

  • .css文件： style-loader, css-loader；
    • css-loader：将css文件转换成commonjs模块加载到js中，css代码被转换成了样式字符串。（转换后得到的commonjs模块可以理解为：用js给元素动态添加样式的那种代码）；
    • style-loader：创建style标签，将css-loader生成的样式资源插入进去，添加到head中，使样式生效。
  • .less文件： style-loader, css-loader, less-loader；
    • less-loader：将less文件编译成css文件；
    • 注：要想less-loader生效，还需要下载less (npm install less -D)。
  • .scss/.sass文件： style-loader, css-loader, sass-loader；
    • sass-loader：将sass或scss文件编译成css文件；
    • 注：要想sass-loader生效，还需要下载node-sass (npm install node-sass -D)。

webpack配置

配置loader时，不同的文件需要分开写rule。

// webpack.config.js

const { resolve } = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      }
    ]
  },
  plugins: [],
  mode: 'development'
}

2.2. 打包html资源

打包html资源需要使用一个plugin: html-webpack-plugin。

用到的plugin

html-webpack-plugin：

  • 不传参的情况：
    • new HTMLWebpackPlugin()：会在配置的output文件夹创建一个空的html, 自动引入打包输出的所有资源，包括js, css...；
    • 设置参数template：复制设置的'./src/index.html'文件到配置的output文件夹，并自动引入打包输出的所有资源。

webpack配置

const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: []
  },
  plugins: [
    /**
     * html-webpack-plugin
     *    1) 不传参的情况 - new HTMLWebpackPlugin()：会在配置的output文件夹创建一个空的html, 自动引入打包输出的所有资源，包括js, css...
     *    2) 参数template：复制设置的'./src/index.html'文件到配置的output文件夹，并自动引入打包输出的所有资源
     */
    new HTMLWebpackPlugin({
      template: './src/index.html'
    }),
  ],
  mode: 'development'

2.3. 打包图片资源

用到的loader

  • url-loader：用来处理css中的图片资源，但不能处理html中的img标签：
    • url-loader基于file-loader运行，所以需下载url-loader 和 file-loader；
    • 可以通过options给loader增加配置项（本文仅介绍案例中用到的）：
      • limit: 图片大小限制，超过的就会被处理成base64；
      • esModule：url-loader默认使用es6解析。设置为false：关闭它的es6模块化，使用commonjs解析;
      • name: 给图片进行重命名。[hash:10] - 取图片的hash的前10位；[ext] - 取文件原来的拓展名。
  • html-loader：处理html文件的img图片（负责引入img，从而能被url-loader进行处理）：
    • 也可以通过options给loader增加配置项：
      • esModule：设置为false：关闭它的es6模块化，使用commonjs解析；

webpack配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        /**
         * url-loader:
         *    1）处理css中的图片资源，注意：不能处理html中的img标签
         *    2）url-loader基于file-loader运行，所以需下载url-loader和file-loader
         *    3）options：loader的其他配置
         *        limit: 图片大小小于8Kb，就会被处理成base64；
         *        esModule：url-loader默认使用es6解析。设置为false：关闭它的es6模块化，使用commonjs解析;
         *        name: 给图片进行重命名。[hash:10] - 取图片的hash的前10位；[ext] - 取文件原来的拓展名。
         */
        test: /\.(jpg|png|gif|jpeg)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          esModule: false,
          name: '[hash:10].[ext]'
        }
      },
      {
        /**
         * html-loader: 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
         */
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

2.4. 打包其他资源

比如，项目中经常会用到的字体图标文件~

使用的loader：file-loader

webpack配置


const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/indes.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 写法一：
        // use: ['style-loader', 'css-loader']
        // 写法二：
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        // exclude：命中除了exclude值之外的文件
        exclude: /\.(css|js|html|png|gif|jpg)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

3. 开发环境配置 - devServer

3.1. devServer简单介绍

devServer：开发服务器，用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出（不会在项目中新建一个文件夹）

如何启动：

  • npx webpack serve(webpack-cli: 4.x);
  • npx webpack-dev-server(webpack-cli 3.x);

3.2. webpack配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/indes.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: []
  },
  plugins: [],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'), // 项目构建后的路径
    compress: true, // 是否使用gzip压缩
    port: 3000, // 设置端口号
    open: true // 是否自动打开浏览器
  }
}

4. 思考和总结

4.1. 打包不同类型的文件

  • .css文件：style-loader, css-loader;
  • .less文件：style-loader, css-loader, less-node;（还需安装less）
  • .scss/sass文件：style-loader, css-loader, sass-loader;（还需安装node-sass）
  • .html文件：html-webpack-plugin;
  • 图片文件(.png/.jpg/.jepg/.gif等)：url-loader, html-loader;
  • 其他文件：file-loader。

4.2. 配置loader的不同写法

注意到了吗，本文中配置loader用到了不同的写法。总的来说，一个loader如果有options配置，就单独分来写。

module.exports = {
  entry: './src/indes.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 写法一：
        // use: ['style-loader', 'css-loader']
        // 写法二：
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        exclude: /\.(css|js|html|png|gif|jpg)$/,
        // 写法三：
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [],
  mode: 'development'
}

4.3. 思考

尝试一下将这些配置串起来写个demo吧？写完我们可以对对答案哦。我的作业放在这里了~

avatar
文章
阅读
粉丝