webpack教程(一)

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/666779

文章标签：

#webpack #json #javascript #ViewUI

准备工作

下载安装node模块,用npm
配置淘宝镜像
webpack是什么
webpack是一个js的打包工具,可以进行很多自动化的工作,比如压缩,提取公共模块,把小图片变成base64格式
webpack是怎么打包的:
- 寻找入口
- 把相关东西全部打包成一个文件(一个包),并且它会记住这些东西的位置
webpack特点
万物皆模块

相关知识

安装webpack

执行以下命令

// 全局安装webpack
npm i webpack -g
npm i webpack-cli -g
webpack -v
// 出现版本号表示安装成功

demo1 单入口文件配置

npm init 初始化package.json
创建一个文件main.js

console.log('main.js');

创建webpack的配置文件 webpack.config.js
配置webpack

// 加载node原有模块path
const path = require('path');

// 导出webpack的配置

module.exports = {
    // 配置入口
    entry: './main.js',
    // 配置输出
    output: {
        // 配置输出路径, 意思是输出到当前目录的dist文件夹
        path: path.resolve(__dirname, 'dist'),
        // 配置输出的包名
        filename: 'bundle.js'
    },
      // 配置环境: 开发环境和生产环境
    mode: 'development'
}

执行命令 webpack

多入口配置

npm init 初始化package.json
创建两个js,main1.js,main2.js

// main1.js
console.log('main1.js');
// main2.js
console.log('main2.js');

配置webpack

const path = require('path');
module.exports = {
    // 配置入口
    entry: {
        main1: './main1.js',
        main2: './main2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 配置输出文件名,同时添加hash
        filename: 'bundle-[name]-[hash:5].js'
    },
    mode: 'development'
}

运行 webpack 命令

配置css-loader

npm init
创建app.css

body {background: gray;}

创建main.js

require('./app.css');
// 其他的代码

配置webpack,配置里用到style-loader和css-loader,需要先安装

npm i style-loader css-loader --save-dev

const path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    // 配置
    module: {
        // 配置规则
        rules: [
            // 配置css相关的loader,下面的配置是告诉webpack,当在打包过程中,
            // 若遇到以.css结尾的文件,就用style-loader和css-loader处理一下再加载
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
            // 配置其他的loader
        ]
    }
}

运行webpack命令

安装less-loader

npm init
创建app.less

body {
    background: gray;
    .title {
        background: green;
        color: #fff;
        font-size: 30px;
    }
}

创建main.js

require('./app.less');

配置webpack

const path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]

        }]
    }
}

安装less,安装style-loader,css-loader,less-loader

npm i less --save-dev
npm i style-loader css-loader less-loader --save-dev

在当前目录运行 webpack命令
检验,创建index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="title">
            test less
        </div>
        <script src="index.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

如果页面样式生效,说明配置是成功的.

配置server(修改了代码实时更新)

npm init
创建main.js

let div = document.createElement('div');
div.style.background = 'green';
div.style.width = '300px';
div.style.height = '300px';
document.body.appendChild(div);

配置webpack

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    plugins: [
        new htmlWebpackPlugin()
    ]
    
}

安装生成html插件模块

npm i html-webpack-plugin --save -dev
npm i webpack --save-dev

安装server

npm i webpack-dev-server -g  (全局安装)
npm i webpack-cli --save-dev

运行命令

webpack-dev-server --open

配置模块热更新

引入webpack

const webpack = require('webpack');

在插件处配置热更新插件

new webpack.HotModuleReplacementPlugin()

在devServer处加上

hot: true

最终的webpack配置文件为

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    plugins: [
        new htmlWebpackPlugin(),
        // 配置热更新
        new webpack.HotModuleReplacementPlugin()

    ],
    mode: 'development',
    devServer: {
        // 根目录
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        // 端口号
        port: 9000,
        // 配置热更新
        hot: true
    }
}

配置快捷启动方式
在package.json的 "scripts"里面加上下面这一句

"dev": "webpack-dev-server --open --inline"

然后使用 npm run dev 开启动服务