Webpack入门简单教程(一)

程序员文章站 2022-07-12 19:35:00

...

webpack 概述

webpack 是一个现代 javascript 应用程序的静态模块打包器
Webpack官网

教程目录

- webpack 概述
前言
一、webpack 的基本使用
二、webpack - loaders 的配置
总结

前言

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用

提示：在安装 Webpack 前，你本地环境需要支持 node.js。

一、webpack 的基本使用

1.webpack基本打包配置

（一）建新项目文件夹，有以下目录：，src/main.js

（二）初始化

npm init -y

（三）安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的)

npm add webpack webpack-cli -D

（三）下载完成之后，到生成的package.json文件中, 配置scripts

scripts: { 
  "build": "webpack --config webpack.config.js" 
}

（四）到生成的webpack.config.js文件中, 配置入口文件

const path = require('path')
// 配置webpack的配置文件, 需要将配置的对象导出, 给webpack使用
module.exports = {
  // 1. 入口 entry, 从哪个文件开始打包
  entry: './src/main.js',
  // output: 配置输出 (打包到哪去)
  output: {
    // 打包输出的目录 (必须是绝对路径)
    path: path.join(__dirname, 'dist'),
    // 打包生成的文件名
    filename: 'bundle.js'
  },
 // 打包模式 production 压缩/development 不压缩
 mode: 'development'
}

（五）运行配置

npm run build

测试：在src文件夹下新建一个aa.js，在main.js导入aa.js，然后运行npm run build 查看结果

//aa.js
console.log('这是测试模块')
//main.js
require('./aa.js')

2.写一个测试代码

（一）新建 public/index.html 编写代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <div class="header"></div>
  <!-- ul>li{我是第$个li}*10 -->
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
</div>
</body>
</html>

（二）用jquery在main.js编写代码，实现隔行变色

//在命令窗口安装jquery
npm add jquery

// 导入jquery
const $ = require('jquery') 
// 需求: 通过jquery实现隔行变色
$(function() {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'green') 
})

3.引入一个自动生成html的插件 -html - html-webpack-plugin-

在 index.html 中手动引入打包后的资源，是有缺点的
比如: 如果webpack 配置中的输出文件名修改了，需要及时在 index.html 中同步修改

（一）下载 (-D 将依赖记录成开发依赖, 只在开发阶段用, 实际上线是不需要的)

npm add html-webpack-plugin -D

（二）在webpack.config.js文件中，引入这个模块

//引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

（三）配置在webpack.config.js文件的modul.exports代码块中


module.exports = {
  plugins: [ 
    // 自动生成 html 的插件
    new HtmlWebpackPlugin({ template: './public/index.html' }) 
  ]
}

配置好了之后, public 目录的 index.html 就不需要引入打包后的文件了, 会自动被插件生成 html 引入

二、webpack - loaders 的配置

webpack默认只认识 js 文件, 但是webpack 可以使用 loader 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。
所以webpack如果要处理其他文件类型, 记得要先配置对应的 loader

1.webpack中处理 css 文件

（一）新建 css 目录，安装依赖

npm add style-loader css-loader -D

（二）配置在webpack.config.js文件的modul.exports代码块中

module.exports = {
  module: { 
    // loader的规则 
    rules: [{ 
    // 正则表达式，用于匹配所有的css文件 test: /\.css$/, 
    // 先用 css-loader 让webpack   能够识别 css 文件的内容 
    // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去 
     use: [ "style-loader", "css-loader"] 
    }] 
  }
}

2.分离 css 文件

将css放到了style标签中, 请求次数是少了,
但是如果css文件太大的话，也不是太好，那有没有什么办法把css分离出来呢？
有一个插件，mini-css-extract-plugin，这个插件支持webpack4.x，
之前的插件extract-text-webpack-plugin对webpack3.x的版本支持 (目前已废弃)

（一）安装依赖包

npm add mini-css-extract-plugin -D

（二）在webpack.config.js文件中，引入这个模块

// 引入分离 css 文件的 模块 
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

（三）配置loaders，配置在webpack.config.js文件中modul.exports代码块中，引入这个模块

module.exports = {
  module: { 
    // loader的规则 
    rules: [
	    {
		   // 正则: 匹配所有以css结尾的文件
		   test: /\.css$/,
		   // 实际处理顺序: 从右往左
		   // css-loader 让webpack能够识别解析 css 文件
		   // style-loader 通过动态的创建style标签的方式(js), 让解析后的css内容, 能够作用到页面中
		   use: [
		     {
		       loader: MiniCssExtractPlugin.loader,
		       options: {
		         publicPath: '../',
		       },
		     }, 
		     'css-loader'
		   ]
		 }
    ] 
  }
}

（四）插件配置

// 配置插件 
plugins: [ 
  // 分离css的插件, 定义打包好的文件的存放路径和文件名
    new MiniCssExtractPlugin({ 
      filename:'css/index.css'
    }),
],

3.webpack 中处理图片 - url-loader

我们试了一下，在css中用到一下背景图片，结果就报错了，难道webpack连图片也认不出来吗？
没有错，的确认不出来, 此时需要转换图片的 loader, 来处理图片的问题, 用到 url-loader 和 file-loader
注意: url-loader 中的部分功能要用到 file-loader, 要下载两个模块

（一）下载依赖包

npm add url-loader file-loader -D

（二）配置loaders，配置在webpack.config.js文件中modul.exports代码块中，引入这个模块

module.exports = {
  module: { 
    // loader的规则 
    rules: [
	    {
        test: /\.(png|jpg|gif)$/i,
        use: [
          // url-loader 如果不配置, 默认都会将文件转成base64字符串的格式
          {
            loader: 'url-loader',
            // 8k以内, 转成base64, 节约请求次数, 8k以外, 单独一个文件请求
            options: {
              limit: 8 * 1024,
              // 配置输出的文件名
              name: '[name].[ext]',
              // 配置静态资源的引用路径
              publicPath: "../images/",
              // 配置输出的文件目录
              outputPath: "images/"
            }
          }
        ]
      }
    ] 
  }
}

4.清除dist目录的插件

使用 clean-webpack-plugin插件在每次打包前清除下dist文件夹。

（一）下载依赖包

npm add clean-webpack-plugin -D

（二）在webpack.config.js文件中引入配置

// 导入清除插件, 可以在每次打包之前, 清除 dist目录的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  module: { 
   // 调用清除打包目录插件
   new CleanWebpackPlugin()
  }
}

4. main.js和webpack.config.js的完整代码

//main.js
// 导入aa模块
require('./aa.js')

// 导入jquery
const $ = require('jquery')

// 导入css
require('./css/base.css')
require('./css/index.css')

// 导入less
require('./less/header.less')

console.log('这是main.js模块')

// 需求: 通过jquery实现隔行变色
$(function() {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'green')
})

//webpack.config.js
const path = require('path')

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 引入分离 css 文件的 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 导入清除插件, 可以在每次打包之前, 清除 dist目录的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


// 配置webpack的配置文件, 需要将配置的对象导出, 给webpack使用
module.exports = {
  // 1. 入口 entry, 从哪个文件开始打包
  entry: './src/main.js',
  // 2. 出口 output, 打包到哪里去
  output: {
    // 打包输出的目录 (输出的目录必须是一个绝对路径)
    path: path.join(__dirname, 'dist'),
    // 打包后生成的文件名
    filename: 'js/bundle.js'
  },
  // 3. 模式 mode  development未压缩的, production压缩
  mode: 'development',

  // 4. 配置module模块加载规则
  // 默认, webpack只认识json, javascript, 不认识其他文件, 如果希望打包处理其他文件, 需要配置对应loader
  module: {
    rules: [
      // (1) 配置css文件的解析
      {
        // 正则: 匹配所有以css结尾的文件
        test: /\.css$/,
        // 实际处理顺序: 从右往左
        // css-loader 让webpack能够识别解析 css 文件
        // style-loader 通过动态的创建style标签的方式(js), 让解析后的css内容, 能够作用到页面中
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader'
        ]
      },
      // (2) 配置less文件的解析
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader', 
          'less-loader'
        ]
      },
      // (3) 配置图片文件的解析  i 表示忽视大小写  .PNG
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          // url-loader 如果不配置, 默认都会将文件转成base64字符串的格式
          {
            loader: 'url-loader',
            // 8k以内, 转成base64, 节约请求次数, 8k以外, 单独一个文件请求
            options: {
              limit: 8 * 1024,
              // 配置输出的文件名
              name: '[name].[ext]',
              // 配置静态资源的引用路径
              publicPath: "../images/",
              // 配置输出的文件目录
              outputPath: "images/"
            }
          }
        ]
      }
    ]
  },

  // 5. 配置插件
  plugins: [
    // 自动生成 html 的插件
    new HtmlWebpackPlugin({ template: './public/index.html' }),

    // 分离css的插件, 定义打包好的文件的存放路径和文件名
    new MiniCssExtractPlugin({ 
      filename:'css/index.css'
    }),

    // 清除dist目录的插件
    new CleanWebpackPlugin()
  ]
}

总结

例如：以上为webpack的一部分简单使用，有webpack的安装，配置，以及几个插件的安装引入和配置。

Webpack入门简单教程(一)

webpack 概述

教程目录

前言

一、webpack 的基本使用

1.webpack基本打包配置

2.写一个测试代码

3.引入一个自动生成html的插件 -html - html-webpack-plugin-

二、webpack - loaders 的配置

1.webpack中处理 css 文件

2.分离 css 文件

3.webpack 中处理图片 - url-loader

4.清除dist目录的插件

4. main.js和webpack.config.js的完整代码

总结

简单采集了yahoo的一些数据_PHP教程

Photoshop入门教程:简单制作绚丽背景

一个简单的短信验证码计时器实现教程

JavaScript极简入门教程（一）：基础篇_javascript技巧

Python进行数据科学工作的简单入门教程

ps消失点滤镜的运用方法以及简单新手入门教程

用Eclipse 创建一个简单的web项目(图文教程)

Java Spring开发环境搭建及简单入门示例教程

ASP.NET MVC4入门教程（一）：入门介绍

ASP.NET MVC4入门教程（二）：添加一个控制器