webpack的打包样式资源

最新推荐文章于 2023-03-11 14:32:38 发布

木木夕0714

最新推荐文章于 2023-03-11 14:32:38 发布

阅读量145

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/qq_50384924/article/details/117768679

版权

一. 开发环境配置的以下几个方面

1-1. 打包 html 样式资源

步骤:

在项目跟目录下运行
npm init
npm i webpack webpack-cli -D
在根目录下创建一个src文件夹,然后在src里面创建入口文件index.js和html样式index.html
现在的目录如下:

3.配置 webpack.config.js
注意点:webpack.config.js 需要创建在根目录下
我们需要安装 html-webpack-plugin 进行解析
webpack.config.js:

/*
    plugins: 1. 下载 2.引入 3.使用 
    1.下载: npm i html-webpack-plugin -D
    2.引入 const HtmlWebpackPlugin = require('html-webpack-plugin');
    3. 使用 new HtmlWebpackPlugin({ template:'./src/index.html' })
*/
// path 是node.js自带的模块,需要引入
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,自动引入打包输出的所有资源(js/css)
        // 需求:需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html'  文件,并自动引入打包输出的所有资源
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

安装 html-webpack-plugin
安装命令:npm i html-webpack-plugin -D

5.打包
输出命令: webpack

2-1 打包图片资源

步骤:

在项目根目录运行
生成 package.json: npm init
本地安装: npm i webpack webpack-cli -D
在项目根目录下创建一个 src 文件夹,然后在src 文件夹下创建index.html,index.scss,index.js,还有用于展示的图片
src目录:
配置 webpack.config.js


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

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出
    output: {
        filename: 'built.js',
        path: resolve(__dirname,'build')
    },
    // loader 配置
    module:{
        rules: [
            {
                test: /\.sass$/,   // 识别出那些文件会被转换
                use: [            // 定义出在进行转换时,应该使用哪个loader
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                // 问题: 默认处理不了html中img图片
                // 处理图片
                test:/\.(jpg|png|gif)$/,
                // 使用一个loader
                // 下载 uel-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb,就会被base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会更大(文件请求速度更慢)
                    limit:8 * 1024,

                    // 给图片进行重命名
                    // [hash:10] 取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                loader:'html-loader',
                // webpack5 中需要把esModule 加在 html-loader 中 
                // html-loader 中 图片的解析
                options:{
                    esModule: false,
                }
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

安装 style-loader , css-loader,sass-loader,url-loader,file-loader,html-loader,

安装style-loader: npm i style-loader -D
安装 css-loader : npm i css-loader -D
安装 sass-loader: npm i sass-loader -D
安装url-loader,file-loader: npm i url-loader file-loader -D
安装html-loader: npm i html-loader -D
安装html-webpack-plugin: npm i html-webpack-plugin -D

打包
输入指令: webpack

3-1 打包其它资源

步骤:

在项目根目录运行
生成 package.json: npm init
本地安装: npm i webpack webpack-cli -D
创建文件

注意:iconfont是阿里矢量图标库里的,我们需要到阿里图标库去下载我们需要的图标,然后引入到 src 中
配置 webpack.config.js

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

module.exports = {
    entry: './src/index.js', //入口文件
    output: {
        filename: 'built.js',
        path: resolve(__dirname,'build')
    },
    // loader配置
    module:{
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            // 打包其它资源(除了html|js|css)
            {
                // 清除html|js|css资源
                exclude:/\.(css|js|html|sass)$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

运行指令: webpack

4-1 devserver

在项目根目录运行
生成 package.json: npm init
本地安装: npm i webpack webpack-cli -D
创建文件
修改配置文件 webpack.config.js

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

module.exports = {
    entry: './src/index.js', //入口文件
    output: {
        filename: 'built.js',
        path: resolve(__dirname,'build')
    },
    // loader配置
    module:{
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            // 打包其它资源(除了html|js|css)
            {
                // 排除 html|js|css资源
                exclude:/\.(css|js|html|sass)$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',

    // 开发服务器 devServer: 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
    // 特点:只会在内存中编译打包,不会有任何输出
    // 启动devServer指令为:npx webpack serve
    devServer:{
        // 项目构建后的路径
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 指定端口号
        port:3000, 
        // 自动打开浏览器
        open:true
    }
}

运行指令 npx webpack serve
注意:如果我们用的是 webpack5.0版本,就用 npx webpack serve

总结:

以上就是对开发环境的打包样式资源,打包html资源,打包图片资源,打包其它资源,devServer的总结
其中,大部分配置都在以上注释中给出解释

运行项目的两个指令:
webpack 会将打包结果输出出去 (build文件夹)
npx webpack serve 只会在内存中编译打包,没有输出(webpack5.0版本有效)
loder 和 plugin 的不同: (plugin 一定要先引入才能使用)
loader: 1.下载 2.使用 (配置 loader)
plugins: 1.下载 2. 引入 3. 使用

以上就是今天的学习总结