webpack学习（1）

最新推荐文章于 2023-09-25 17:28:10 发布

Sk8？？？

最新推荐文章于 2023-09-25 17:28:10 发布

阅读量162

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/mrslonly/article/details/112568838

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack是什么？

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

通俗来说：webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack五个核心概念

1. entry：入口指示webpack以那哪个文件为入口起点开始打包，分析构建依赖图

2. output：输出指示webpack打包后的资源bundles输出到哪里去，以及如何命名

3. loader：loader让webpack能够去处理哪些非js文件

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

5. mode：相对应的模式：开发模式“development”和生产模式“production”

npm i -g webpack

npm install webpak --save--dev

npm init (创建一个package.json文件)

运行指令：

开发环境：webpack ./src/index.js -o ./build/build.js --mode=development

webpack 会以 ./src/index.js 为入口文件开始打包打包后输出到 ./build/build.js

整体打包环境，是开发环境

生产环境：webpack ./src/index.js -o ./build/build.js --mode=production

webpack 会以 ./src/index.js 为入口文件开始打包打包后输出到 ./build/build.js

整体打包环境，是生产环境

webpack打包样式资源

-D是-save -dev缩写

代码目录：

index.js

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

webpack.config.js

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

所以构建工具都是基于node.js平台运行的 模块化默认采用common.js
*/
//resolve 用来拼接绝对路径的方法
const {resolve} =require('path');
module.exports={
    //webpack 配置
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'built.js',
        //输出路径
        //_dirname node.js的变量，代表当前文件的目录绝对路径
        path:resolve(__dirname,'build'),
    },
    //loader的配置
    module:{
        //详细的loader配置
        //不同文件必须配置不同loader处理
        rules:[
            {
                //匹配哪些文件
                test:/\.css$/,
                //使用哪些loader进行处理
                use:[
                    //use数组中的loader的执行顺序：从有到左，从上到下 依次执行
                    //创建一个style标签，将js中的样式资源插入进去，添加到header中生效
                    'style-loader',
                    //将css文件变成common.js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    //将less文件编译成css文件
                    //less-loader和less
                    'less-loader'
                ]
            }
        ]
    },
    //plugins的配置
    plugins:[
        //详细的plugins的配置
    ],
    //模式
    mode:"development",
    // mode:"production"
}

webpack打包html资源

代码目录：

index.js




function add(x,y){
    return x+y;
}
console.log(add(2,3))

webpack.config.js


/*
    loader:1. 下载 2. 使用（配置loader）
    plugins: 1.下载 2. 引入 3. 使用

*/
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:[
            //loader的配置

        ]
    },
    plugins:[
        //plugins的配置
        // html-webpack-plugin
        //功能：默认会创建一个空的html，自动引入打包输出的所有资源js/css
        //需求：需要有结构的HTML文件
        new HtmlWebpackPlugin(
            {
                //复制 './src/index.html' 文件，并自动引入打包输出的所有资源js/css
                template:'./src/index.html'
            }
        ),

    ],
    mode:'development' 

}

在高版本打包时可能会报错：

执行npm uninstall html-webpack-plugin卸载

重新安装最新版本npm i html-webpack-plugin@5.0.0-alpha.9

webpack打包图片资源

代码目录：

index.js

import './index.less'

webpack.config.js

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

所以构建工具都是基于node.js平台运行的 模块化默认采用common.js
*/
//resolve 用来拼接绝对路径的方法
// npm uninstall html-webpack-plugin
//npm i html-webpack-plugin@5.0.0-alpha.9
const {resolve} =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    //webpack 配置
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'built.js',
        //输出路径
        //_dirname node.js的变量，代表当前文件的目录绝对路径
        path:resolve(__dirname,'build'),
        publicPath: './'
    },
    //loader的配置
    module:{
        rules:[
            {
                test: /\.less$/,
                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:28*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的配置
    plugins:[
        new HtmlWebpackPlugin(
            {
                //复制 './src/index.html' 文件，并自动引入打包输出的所有资源js/css
                template:'./src/index.html'
            }
        ),
    ],
    //模式
    mode:"development",
    // mode:"production"
}

B站超详细视频讲解

Sk8？？？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack学习（1）

目录webpack是什么？webpack五个核心概念webpack打包样式资源webpack打包html资源webpack打包图片资源webpack是什么？webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 Webpack看来,前端的所有资源文件ljs/json/css/img/less/....都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。通俗来说：webpack可以看做是模块..
复制链接

扫一扫