10.0、vue-webpack安装学习与使用

澜色海湾

已于 2022-03-01 21:39:15 修改

阅读量531

点赞数

分类专栏： vue学习总结文章标签： webpack 学习前端

于 2022-03-01 21:04:47 首次发布

本文链接：https://blog.csdn.net/m0_52433668/article/details/123215730

版权

vue学习总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

10.0、vue-webpack安装学习与使用

第一步：安装webpack

webPack是一款模块加载器兼打包工具，它能把各种资源，如JS/JSX/ES6/SASS/LES/图片等都作为模块来处理和使用。

安装：

npm install webpack -g

npm install webpack-cli -g

测试安装成功：

·webpack -v

·webpack-cli -v

第二步：创建一个项目webpack-study

第三步：用IDEA打开这个项目，然后在该项目下创建一个文件夹 modules，在modules下

创建一个hello.js文件和一个main.js文件，代码如下

hello.js文件

//暴露一个方法
exports.sayHi = function () {
    document.write("<h1>蓝色海湾</h1>")
};
exports.sayHi1 = function () {
    document.write("<h1>蓝色海湾</h1>")
};
exports.sayHi2 = function () {
    document.write("<h1>蓝色海湾</h1>")
};
exports.sayHi3 = function () {
    document.write("<h1>蓝色海湾</h1>")
};

main.js文件

var hello = require("./hello");
hello.sayHi();

第四步：在webpack-study项目下，创建webpack.config.js文件

module.exports = {
  entry: './modules/main.js',
  output: {
      filename: "./js/bundle.js"
  }
};

第五步：在Terminal控制台中输入webpack命令行，将代码打包

第六步：在webpack-study项目下，创建index.html文件，测试一下能否成功打开

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="dist/js/bundle.js"></script>
</body>
</html>

最后补充一种命令行：

还有一种打包操作webpack --watch ，输入这行命令后，他会一直监听我们的操作，当我们改变js代码的时候，他就会立马重新打包生成一份新的js打包文件。（但是我们一般不会直接这么使用）

如何操作：直接在Terminal控制台中输入webpack --watch命令行回车即可开始监听，然后 Ctrl+C 命令可以停止监听。