三.Webpack安装

被子不喝酒

已于 2023-01-08 15:36:57 修改

阅读量113

点赞数

分类专栏：前端文章标签： webpack 前端

于 2023-01-08 15:32:56 首次发布

本文链接：https://blog.csdn.net/qq_59066017/article/details/128601723

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

webpack简介

webpack是静态模块打包工具,分析翻译,压缩,打包代码

支持所有类型文件的打包
支持less/sass=>css
支持ES6/7/8=>ES5
压缩代码,提高加载速度

安装webpack

npm install webpack -g
npm install webpack-cli -g

测试安装成功

webpack -v
webpack-cli -v

使用webpack

创建一个空的文件夹,然后在ider中打开,该文件夹就会被ider中所管理
创建一个名为modules的目录,用于防止JS模块等资源文件

在modiles下创建js文件即可

//暴露一个方法:sayHi
exports.sayHi = function(){
    document.write("<div>Hello webpack</div>");
};

在modules下创建一个名为main.js的入口文件,用于打包时设置entry属性

//require 导入一个模块,就可以调用这个模块中的方法了
var hello = require("/hello");
hello.sayHi();

在项目目录下创建webpack.config.js配置文件使用webpack命令打包

注意: 使用webpack打包时,有可能会发生错误,这时请使用npx webpack打包

webpack.config.js的代码

// 将模块导出
module.exports = {
    // 入口文件,指定WebPack用那个文件作为项目的入口
    entry:'./modules/main.js',
    // 输出,指定WebPack把处理完成的文件防止到指定路径
    output: {
        // 打包后指定js文件的路径和包名
        filename:"./js/bundle.js"
    }
};

打包成功后出现一个文件夹

6.在目录上创建一个html ,导入我们打包后的js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入打包成功路径的js  前端的模块化开发-->
<script src="dist/js/bundle.js"> </script>
</body>
</html>

点击以下任意浏览器就可完成页面