webpack 打包其它资源

卡卡罗特酷酷一麻袋
785 阅读4分钟

开始

注意: webpack 打包webpack不识别的资源,均需要搭配loader使用,在webpack.config.js中配置

1. 首先初始化项目

npm init

2. 安装webpck webpack-cli

npm i webpack webpack-cli -D

3.在根目录下创建webpack.config.js文件

webpack.config.js文件: webpack的配置文件

作用: 指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)

所有的构建工具都是基于nodejs平台运行的~模块化默认采用commonjs

4.安装其他webpack不识别资源及loader

npm i xx -D
npm i xx-loader -D

5.在webpack.config.js的module中的rules进行匹配

// loader的配置
  // 不同文件必须配置不同的loader处理
  module: {
    rules:[
      // 详细loader配置
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use:[
          // use数组中loader执行顺序:从右到左,从下到到上 依次执行
          // 创建style标签,将js中的样式资源插入进行,添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          'less-loader'
        ]
      }
    
    ]
  },

打包样式资源

  • 代码结构

build是打包后的文件

index.css 样式文件 需要安装 css-loader style-loader

npm i css-loader -D
npm i style-loader -D

index.less 样式文件 使用less需要安装less及less-loader less文件同样也需要 css-loader style-loader

npm i less -D
npm i less-loader -D

webpack.config.js 代码

const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output:{
    filename: 'built.js', // 输出文件名
    // 输出路径
    // __dirname 是nodejs的变量,代表当前文件(webpack.config.js)的目录绝对路径
    path: resolve(__dirname, 'build'),
  },
  // loader的配置
  // 不同文件必须配置不同的loader处理
  module: {
    rules:[
      // 详细loader配置
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use:[
          // use数组中loader执行顺序:从右到左,从下到到上 依次执行
          // 创建style标签,将js中的样式资源插入进行,添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          'less-loader'
        ]
      }
    
    ]
  },
  // plugins的配置
  plugins:[
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development' // 开发模式
  // mode: 'production'
}

index.js

// 引入样式资源
import './index.css';
import './index.less';

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./built.js"></script>
  <h1 id="title">Webpack</h1>
</body>
</html>

运行webpack命令打包

在build文件下创建index.html 引入打包后的文件(built.js)使用浏览器打开就可以看到效果了

打包HTML文件(插件的使用)

安装插件html-webpack-plugin,作用就是在webpack打包的时候在built文件下生成index.html文件

npm i html-webpack-plugin -D // webpack5使用这个命令会报错 亲测
// webpack5 需改用以下命令
 npm i html-webpack-plugin@next  -D

目录结构

其中build文件中的index.html文件不再是手动创建而是使用插件之后自动创建的

src/index.js

// 随便写个函数
function add(x,y){
  return x + y;
}

console.log(add(2, 3));

src/index.html

// 随便写点内容,不引入打包后的js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <h1 id='title'>hello html</h1>
</body>
</html>

webpack.config.js

loader: 1. 下载 2.使用 (配置loader)

plugins: 1.下载 2.引入 3. 使用

/*
 
 */
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入 html-webpack-plugin插件

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins的配置
    // html-webpack-plugin
    // 功能: 默认会创建一个空的HTML,引入打包输出的所有资源(JS/CSS)
    // 需求: 需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

打包图片资源

打包图片资源需要安装的loader

url-loader file-loader: 用于处理图片资源 其中url-loader是依赖file-loader使用

html-loader: 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)

npm i url-loader file-loader -D
npm i html-loader -D

代码示例:

// src/index.html
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <img src="./1.jpg">
</body>

// src/index.js
import './index.less';
// src/index.less
#box1{
  width: 100px;
  height: 100px;
  background-image: url('./1.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#box2{
  width: 100px;
  height: 100px;
  background-image: url('./2.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#box3{
  width: 100px;
  height: 100px;
  background-image: url('./3.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'built')
  },
  module: {
    rules:[
      {
        test: /\.less$/,
        // use里面放数组就是要使用多个loader
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        // 问题:处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载url-loader file-loader
        loader: 'url-loader',
        options:{
          // 图片大小小于8kb,就会被base64处理
          // 优点:减少请求数量(减轻服务器压力)
          // 缺点: 图片体积会更大(文件请求速度更慢)
          limit: 8 * 1024,
          // 给图片进行重命名
          // [hash:10]取图片的hash前10位
          // [ext]取文件原来的扩展名(jpg|png之类的)
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

打包其他资源

其他资源: 不需要做任何处理,原封不动的打包出去(以字体图标为例iconfont)

需要用的loader: style-loader css-loader file-loader

首先要下载iconfont字体图标,这里我用的是font-class方式引入

目录结构:

代码示例:

// src/index.html
<body>
  <span class="iconfont icon-shengdantubiao-01"></span>
  <span class="iconfont icon-shengdantubiao-02"></span>
  <span class="iconfont icon-shengdantubiao-10"></span>
  <span class="iconfont icon-shengdantubiao-19"></span>
</body>

// src/index.js
// 引入 iconfont样式文件
import './iconfont.css';

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'built')
  },
  module: {
    rules: [
      {
        // 检测
        test: /\.css$/,
        use:['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html)/,
        loader: 'file-loader',
        options:{
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

demo地址

借鉴视频: B站尚硅谷

avatar
文章
阅读
粉丝
相关推荐
Webpack打包优化
19k阅读
 · 
189点赞
Webpack 模块打包原理
17k阅读
 · 
187点赞
webpack 打包优化
5.3k阅读
 · 
63点赞
webpack多页面打包
10k阅读
 · 
102点赞
Webpack打包
2.4k阅读
 · 
16点赞