当前位置：首页 > news >正文

webpack基本使用和开发环境配置

news 2026/3/26 14:09:23

1 webpack 基本使用

01 webpack 简介

02 webpack 初体验

2 webpack开发环境配置

03 打包样式资源

04 打包html资源

05 打包图片资源

06 打包其他资源（以打包icon为例）

07 devServer

08.开发环境配置

1 webpack 基本使用

由于笔记文档没有按照之前的md格式书写，所以排版上代码上存在问题😢😢😢😢

01 webpack 简介

初始化文件---包的名字---默认值ok---下载jQuery

02 webpack 初体验

1.webpacvk安装

npm install --save-dev webpack@4.46.0

npm install --save-dev webpack-cli@3

2.运行指令

开发环境

生产环境

3.css不能处理

2 webpack开发环境配置

03 打包样式资源

1 打包css

loader：解析翻译webpack不能识别的模块,loader需要定义配置文件

项目（src）使用的是：ES6

配置 (webpack.config.js) 使用的是：common.js

配置css-loader style-loader

npm i css-loader@3.4.2 style-loader@1.1.3 -D

（如果，安装错误，可能是因为版本过高的问题）

webpack.config.js

JavaScript
/*
webpack.config.js webpack的配置文件
    作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

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

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

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

打包

没有全局安装的用 npx webpack

此时的css也打包进去了

小结一下：

打包过程：首先是入口文件index.js，之后又相关联打包文件eg index.css，可以打包的直接打包，不可以的，需要配置webpack.config.js然后再打包，打包之后的文件到build/built.js，可以在里面代码中找到相关的打包的文件

是否生效

在build里面新建一个index.html

2 打包less

如果直接打包less，会出现报错，我们需要配置less-loader

配置less-loader

webpack.config.js

上述代码里面添加

JavaScript
{
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]

}

打包

小结一下：

webpack只能打包js,json，其他的css,less等需要下载loader资源

不同文件配置不同loader处理

04 打包html资源

webpack.config.js基本结构

下载插件

npm i html-webpack-plugin@3 -D

引用，使用

打包

plugins配置

05 打包图片资源

入口文件引入样式

import './index.less'

html,不用引入，因为插件会自动生成

less里面又引入了图片资源，所以我们需要配置，来打包这个资源

对样式文件和html文件进行处理

JavaScript
const { resolve } = require('path');
const HtmlWebpackPlungin = 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'
                ]
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlungin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

打包

会出现错误------图片资源

url 图片处理

1 webpack.config.js配置

2 下载url-loader , file-loader

npm i url-loader@3.0.0 file-loader@5.0.2 -D

3 npx webpack 打包

样式里面的url的图片资源都可以处理，但是默认处理不了html里面的图片，需要下载html-loader

html图片处理

webpack.config.js配置

下载 npm i html-loader@0.5.5 -D

打包 npx webpack

打包成功了，但是还是会有问题，页面中图片还是会裂开

问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs

解析时会出问题： [ object Module ]

解决：关闭url-loader的es6模块化，使用commonjs解析

esModule: false

图片名过长，更改图片名

06 打包其他资源（以打包icon为例）

步骤：

阿里图标下载所需要资源代码

index.html引入图标 <span class="iconfont icon-zhaopinqiuzhi"></span>

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

写webpack配置

JavaScript
// 打包其他资源（除了html/js/css资源以外的资源）
{
        // 排除css/js/html资源
        exclude: /\.(css|js|html)$/,
        loader: 'file-loader'
}

打包npx webpack

运行build里面的index.html

07 devServer

webpack配置

下载 npm i webpack-dev-server@3.10.3 -D

启动 npx webpack-dev-server

localhost:3000就可以访问尴尬index.html页面内容

更改代码内容时，终端也会随之改变，localhost里面的内容也会改变，都是自动编译的，就不用像之前，修改完代码，就打包一次（监视源代码）

1 webpack 基本使用

01 webpack 简介

02 webpack 初体验

2 webpack开发环境配置

03 打包样式资源

04 打包html资源

05 打包图片资源

06 打包其他资源（以打包icon为例）

07 devServer

08.开发环境配置

JavaScript
/*
开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

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

module.exports = {
entry: './src/js/index.js',
output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
},
module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
},
plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
],
mode: 'development',
devServer: {
  contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
}
};

补充：

源代码通过webpack编译处理，输出bundle，资源文件就能被浏览器运行

我们就需要搭建这样的环境，我们还加了一些自动化操作，自动打开浏览器，等等

1 webpack 基本使用

01 webpack 简介

02 webpack 初体验

2 webpack开发环境配置

03 打包样式资源

04 打包html资源

05 打包图片资源

06 打包其他资源（以打包icon为例）

07 devServer

08.开发环境配置

相关文章：