四时宝库

程序员的知识宝库

2024年07月29日

webpack的概念，每一个配置的作用以及具体的操作实践

一、webpack概念

1.1 webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

1.2 webpack 五个核心概念

1.2.1 Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2.2 Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

1.2.3 Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)

1.2.4 Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

1.2.5 Mode

模式(Mode)指示 webpack 使用相应模式的配置。

二、webpack配置

2.1 初始化配置

  1. 初始化 package.json输入指令:
npm init
  1. 下载并安装 webpack输入指令:
//【全局安装】
npm install webpack webpack-cli -g
//【本地安装
npm install webpack webpack-cli -D

2.2 编译打包应用

  1. 创建文件
  2. 运行指令
    开发环境指令:
webpack src/js/index.js -o build/js/built.js --mode=development

功能: webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。

生产环境指令:

webpack src/js/index.js -o build/js/built.js --mode=production

功能:在开发配置功能上多一个功能，压缩代码。

  1. 结论
    webpack 能够编译打包 js 和 json 文件。
    能将 es6 的模块化语法转换成浏览器能识别的语法。
    能压缩代码。
  2. 问题
    不能编译打包 css、img 等文件。
    不能将 js 的 es6 基本语法转化为 es5 以下语法。

三、webpack 开发环境的基本配置

3.1 创建配置文件

  1. 创建文件 webpack.config.js
  2. 配置内容如下
const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。                                    
module.exports = {
  entry: './src/js/index.js', // 入口文件
  output: { // 输出配置
  filename: './built.js',
  path: resolve(__dirname, 'build/js')
  },                        
  mode: 'development' //开发环境
};
  1. 运行指令
webpack

3.2 打包样式资源

1.创建文件


2. 下载安装 loader 包

npm i css-loader style-loader less-loader less -D
  1. 修改配置文件
// 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'                        
    ]
    },                        
        {
            test: /\.less$/,
            use: [                    
    'style-loader',
    'css-loader',
    // 将 less 文件编译成 css 文件// 需要下载 less-loader 和 less
    'less-loader'                        
    ]
    }                        
    ]
},                        
// plugins 的配置
plugins: [                        
// 详细 plugins 的配置
],                        
// 模式
mode: 'development', // 开发模式// mode: 'production'                        
}
  1. 运行指令
webpack

3.3 打包 HTML 资源

  1. 创建文件
  1. 下载安装 plugin 包
npm install --save-dev html-webpack-plugin
  1. 修改配置文件
                                                                        
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: [                        
    // loader 的配置
    ]                        
  },
  plugins: [                        
// plugins 的配置
// html-webpack-plugin
// 功能:默认会创建一个空的 HTML，自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的 HTML 文件
new HtmlWebpackPlugin({                        
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)                        
      template: './src/index.html'
    })                    
],                        
  mode: 'development'
};

4.运行指令:

webpack

3.4 打包图片资源

1.创建文件

2.下载安装 loader 包

npm install --save-dev html-loader url-loader file-loader

3.修改配置文件

                                                                    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$/,// 要使用多个 loader 处理用 use
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,
// 问题:因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
// 解析时会出问题:[object Module]
// 解决:关闭 url-loader 的 es6 模块化，使用 commonjs 解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的 hash 的前 10 位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'                        
}},                        
{
test: /\.html$/,// 处理 html 文件的 img 图片(负责引入 img，从而能被 url-loader 进行处理)
loader: 'html-loader'                        
}]                        
},
plugins: [                        
    new HtmlWebpackPlugin({
      template: './src/index.html'                    
})],                        
  mode: 'development'
};
  1. 运行指令: webpack

3.5 打包其他资源

  1. 创建文件
  1. 修改配置文件
                                                                        
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: /\.css$/,
        use: ['style-loader', 'css-loader']                        
},                        
// 打包其他资源(除了html/js/css资源以外的资源)
{                        
// 排除 css/js/html 资源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {                        
          name: '[hash:10].[ext]'
        }                        
}]                        
},
plugins: [                        
    new HtmlWebpackPlugin({
      template: './src/index.html'                        
    })                                                                            
],                        
  mode: 'development'
};
  1. 运行指令: webpack

3.6 devserver

  1. 创建文件
  1. 修改配置文件
                                                                        
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: /\.css$/,
        use: ['style-loader', 'css-loader']                        
        },                        
// 打包其他资源(除了html/js/css资源以外的资源)
{                        
// 排除 css/js/html 资源
exclude: /\.(css|js|html|less)$/,                                                                        loader: 'file-loader',
        options: {                        
          name: '[hash:10].[ext]'
        }                        
}]                        
},
plugins: [                        
    new HtmlWebpackPlugin({
      template: './src/index.html'                        
    })
],                        
mode: 'development',
devServer: {                        
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动 gzip 压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true                        
}};
  1. 运行指令:
npx webpack-dev-server

3.7 开发环境配置

1.创建文件

  1. 修改配置文件
                                                                        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                        
}};
  1. 运行指令:
npx webpack-dev-server

暂时写到这里吧。

标签：webpackoutput 

作者:sishi88 , 分类:技术教程 , 浏览:8 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接