1.1 webpack打包入门

LetsStudy

已于 2022-02-21 14:19:21 修改

阅读量121

点赞数

分类专栏： webpack 文章标签： webpack打包入门 webpack打包配置

于 2020-12-11 16:25:02 首次发布

本文链接：https://blog.csdn.net/LetsStudy/article/details/111039556

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、安装nodejs的环境

二、新建项目

1、在开发工具中新建项目和目录

2、在开发工具的终端执行初始化生成package.json

npm init -y

3、安装yarn

npm install yarn -g

4、安装webpack

yarn add webpack

5、在js目录下和html目录先增加js和html文件

a.js

document.write("hello webpack");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

6、项目根目录下新建webpack配置文件

webpack.config.js

let path = require('path');
let HTMLWebpackPlugin = require('html-webpack-plugin');
let { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    mode: 'development',  // 模式 模式有两种  production development
    entry: './src/js/a.js', // 入口
    output: {
        filename: "bundle.[hash:8].js", // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 路径必须是绝对路径
    },
    plugins: [  // 放着所有的webpack插件
        new HTMLWebpackPlugin({
            template: "./src/html/index.html",
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true,	// 移除引号
                collapseWhitespace: true,	// 去除换行
            },
            hash: true
        }),
        new CleanWebpackPlugin(),//清理dist文件夹

    ],


};

7、webpack.config.js配置文件中有2个插件要安装

yarn add html-webpack-plugin 用来打包html文件

yarn add clean-webpack-plugin 用来清除dist中的文件

8、打包

执行webpack，生成dist文件夹，webpack版本高的话，还需要安装webpack cli

9、打包后的效果

LetsStudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.1 webpack打包入门

一、安装nodejs的环境二、新建项目1、在开发工具中新建项目和目录2、在开发工具的终端执行初始化生成package.jsonnpm init -y3、安装yarnnpm install yarn -g4、安装webpackyarn add webpack5、在js目录下和html目录先增加js和html文件a.jsdocument.write("hello webpack");index.html<!DOCTYPE html>&l.
复制链接

扫一扫

专栏目录