webpack的简单使用

最新推荐文章于 2024-08-13 16:49:07 发布

HardworkLiao

最新推荐文章于 2024-08-13 16:49:07 发布

阅读量68

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/m0_52411807/article/details/125414794

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、需要的工具
二、使用步骤
（三）优化
- 问题
- 解决方案
（四）拓展

一、需要的工具

VsCode
Webpack

二、使用步骤

（1）项目目录

在这里插入图片描述

（2）初始化项目

VsCode终端输入 npm init -y

（3）写html页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="./index.js"></script> -->
    <!-- 导入webpack处理好后没有兼容性问题的代码 -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- 导入自定义打包的好没有兼容性的代码 -->
    <!-- <script src="../dist/bundles.js"></script> -->
    <!-- 访问根目录下的bundles.js文件 -->
    <!-- 这里可以注释掉的原因是因为在html插件会自动在body的底部注入bundles.js -->
    <!-- <script src="/bundles.js"></script> -->
    <title>隔行换色</title>
</head>
<body>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
        <li>第五个li</li>
        <li>第六个li</li>
        <li>第七个li</li>
        <li>第八个li</li>
        <li>第九个li</li>
    </ul>
<div id="box"></div> 
</body>

</html>

（4）写js文件

安装jquery npm i jquery
index.js

//通过ES6语法引入jquery模块
import $ from 'jquery'
//需要指定的加载器处理
import '../css/index.css'
import '../css/index.less'
// 实现隔行换色
$(function () {
  $('li:odd').css('backgroundColor', 'red') //基数行为红色
  $('li:even').css('backgroundColor', 'blue') //偶数行为蓝色
})

（5）安装并配置webpack

终端输入npm i webpack和npm i webpack-cil
新建webpack.config.js文件，添加如下代码
webpack.config.js

// 引入path模块
const path = require('path')
module.exports = {
  // 定义打包的模式
  mode: 'development',
  // 打包文件的入口
  entry: path.join(__dirname, './src/index.js'),
  // 打包好后文件的出口
  output: {
    path: path.join(__dirname, './dist'),
    // 打包好的文件名字
    filename: 'js/bundles.js'
  },

在package.json中scripts节点，写入如下代码

在开发模式下打包
"dev1": "webpack "
在生产模式下打包
"build": "webpack --mode production" 覆盖掉mode的值

（6）写样式

1. 写样式文件

index.css

ul{
    list-style: none;
}

index.less

html,body,ul{
    margin: 0;
    padding: 0;
    li{
        height: 10px;
        line-height: 10px;
        margin: 10px;
        padding:10px
    }
}
#box{
    width: 1000px;
    height: 1000px;
    background:url("../image/logo.png") no-repeat
}

2. 安装css-loader、less-loader和url-loader处理css、less文件和url路径

npm i css-loader 、npm i less-loader、npm i url-loader

3. 配置css-loader、less-loader和url-loader

在webpack.config.js写入如下代码

 module: {
    //所有第三方文件的匹配规则
    rules: [
      //文件后缀名的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //loader的顺序不能反，调用顺序是从后往前
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
     // { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22227&esModule=false' } 
      {
        //url-loader的另一种配置方法
        test: /\.(jpg|png|gif)$/i,
        type: 'javascript/auto', //webpack5需要
        use: {
          loader: 'url-loader',
          options: {
            limit: 22227,//图片大小于这个值会将图片转化成base64格式,能够更快加载图片
            esModule: false,//默认值为true,这里为了能够使用CommonJs语法，为false
            outputPath: 'image' //指定图片文件的输出路径
          }
        }
      },
      ]

（7）打包

终端输入npm run dev1 生成dist目录，打开dist目录下的index.html,效果图如下
在这里插入图片描述

（三）优化

问题

需要把dist目录下的index.html手动打开
每次打包前都有旧的dist目录，需要手动删除

解决方案

安装webpack-dev-server、clean-webpack-plugin和html-webpack-plugin

安装html-webpack-plugin

npm i html-webpack-plugin
webpack.config.js写入如下代码

 // 按需导入插件、得到插件的构造函数之后，创建插件的实例对象
// html插件的作用是能够复制一份打包好后的文件放在内存中
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html', //原文件的存放路径
  filename: './index.html' //指定生成文件的存放路径，放在项目的根目录上
})

module.exports中写入如下代码

plugins: [htmlPlugin]

安装webpack-dev-serve

npm i webpack-dev-serve
webpack.config.js的module.exports中写入如下代码

devServer: {
    open: true, //是否自动打开浏览器
    host: '127.0.0.1', //主机号
    port: 8081 //端口号
  },

在package.json中scripts节点写入

 "dev2": "webpack serve",

3.安装clean-webpack-plugin

npm i clean-webpack-plugin
webpack.config.js写入如下代码

// 引入清除dist目录中的webpack插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 实例化CleanWebpackPlugin对象
const cleanPlugin = new CleanWebpackPlugin()

webpack.config.js的module.exports的plugins节点写入如下代码

  plugins: [htmlPlugin, cleanPlugin],

在终端输入npm run dev在每次打包后就会自动删除旧的dist目录，并且自动跳转到浏览器中显示

（四）拓展

在终端显示定位错误的source map的配置， webpack.config.js的module.exports下添加如下代码

// eval-source-map仅限在“开发模式”下使用，不建议在“生产模型”下使用
  // 此选项生成的source map能够保证“运行时报错的行数”与“源代码的行数”保持一致
  // devtool: 'eval-source-map',
  //在生产环境下，只暴露行号，不暴露源码
  // devtool: 'nosources-source-map',
  // 暴露行号和源代码，非常危险，不使用
  devtool: 'source-map',

HardworkLiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的简单使用

VsCode终端输入（4）写js文件安装jquery （5）安装并配置webpack终端输入和新建webpack.config.js文件，添加如下代码在package.json中scripts节点，写入如下代码在开发模式下打包在生产模式下打包覆盖掉mode的值（6）写样式1. 写样式文件2. 安装css-loader、less-loader和url-loader处理css、less文件和url路径、、在webpack.config.js
复制链接

扫一扫