webpack打包

一.简单打包

1.首先创建两个文件包build 和src 文件包

2.在src上创建.css .html .less .js 文件。

3..js文件是基本配置

4.创建webpack.config.js文件，写入配置信息。

5.build是自动打包生成的文件

简单小例子如下：

创建index.less文件

div{
    .title{
        font-size: 66px;
        color: red;
    }
}

创建index.css文件

body{
    background-color: orange;
}

创建index.js文件

import "./index.css"
import "./index.less"
// webpack.config.js
// 基础配置
// 项目根目录执行指令 webpack

在build文件包下创建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">
    <title>Document</title>
    <script src="./built.js"></script>
</head>
<body>
    <div> <p class="title">我爱中国</p></div>
    
</body>
</html>

创建webpack.config.js文件，写入配置信息。

// 项目的根目录  webpack.config.js

// config 配置

// 这个文件就是配置webpack的

// 只是webpack干哪些活，（运行 webpack指令的时候，会加载这里面的配置）
// 构建工具都是基于node js平台运行
// 模块化采用common JS规范

// 配置的主要就是5大核心

module.exports={
    // 入口
    entry:"./src/index.js",
    // 出口
    output:{
        // 输出文件的名字
        filename:"built.js",
        // 输出文件的路径
        path:__dirname+"/build"
    },
    module:{
        rules:[
            // 详细的loder配置
            {
                // 匹配文件
                // 哪种类型的文件 用这个Loder翻译
                test:/\.css$/,
                // 使用哪些loder来解析 /翻译
                // loader加载顺序，从上到下的
                use:[
                    // 创建style标签 将js中的样式资源插入，添加到head中生效
                    "style-loader",
                    // 将css文件编译成common js 模块加载到js中
                    "css-loader"
                ]
            },
            // less相关的
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    // 将less 编译成css
                    "less-loader"
                ]
            },
        ]
    },
    // 插件
    plugins:[
        // 详细的 plugins 配置

    ],
    // 模式 production生产
    mode:"development"

}

如果需要打包后自动生成一个index.html文件，要在webpack.config.js文件插件中设置

plugins:[
        // 详细的 plugins 配置
        // 打包后自动生成一个index.html文件
        // 如果不配置模板生成的index.html 
        new HtmlWebpackConfig({
            // 指定html文件模板位置
            // 而且还会自动引入 入口文件
            // 打包后会带入这个模板内容
            template:"./src/index.html"
        
        })

    ]

如果需要设置图片在webpack.config.js文件的rules文件中设置

module: {
        rules: [
            // less相关的
            {
                test: /\.less$/,
                // use 使用多个loader
                use: [
                    "style-loader",
                    "css-loader",
                    // 将less 编译成css
                    "less-loader"
                ]
            },
            // 图片 loader 翻译
            {
                test: /\.(jpg|png|gif)$/,
                // 只是用一个loader
                loader: "url-loader",
                // 配置项
                options: {
                    // 8M以下的 用base64图片
                    // 会把图片转为base64 字符串
                    // 优点：减少请求数量 减轻服务压力
                    // 相同的图片只有一张
                    // 缺点 图片提交会增大(请求速度会变慢)
                    limit: 8 * 1024,
                    // 配置图片的名字
                    // 取到哈希 hash 值得前10位 拼接上扩展名
                    name:"[hash:10].[ext]"
                }
            },
            // 配置loader 用来翻译html里面的图片
            {
                test: /\.html$/,
                // 处理html文件当中的img图片（负责引入，再有url-loader解析）
                loader:"html-loader"
            },

        ]
    }

需要自动刷新，需要配置服务

// 配置开发环境服务器
    // 自动编译 自动打开浏览器 自动刷新
    // 只会在内存中编译打包 不会有任何输出 
    // 启动指令 npx webpack-dev-server
    devServer:{
        // 基础目录配置
        contentBase:__dirname+"/build",
        // 启动gzip压缩
        compress:true,
        // 默认端口3000
        port:3000,
        // 是否打开浏览器
        open:true


    }

一.简单打包

相关推荐