webpack安装配置

最新推荐文章于 2024-09-05 14:26:45 发布

aneprwe

最新推荐文章于 2024-09-05 14:26:45 发布

阅读量343

点赞数

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

本文链接：https://blog.csdn.net/yang1599670483/article/details/78252228

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Webpack 是一个前端资源加载/打包工具。通过项目的主文件，找到该文件依赖的其他文件，如果有其他类型的文件，就需要使用 loader 进行转换，然后将这些文件转换成一个静态的js文件。

安装webpack

全局安装

npm install webpack -g

新建项目

先建一个空白的文件夹webpacktest，然后从这个文件夹进入命令行窗口，输入npm init 会为该项目自动创建一个package.json文件。

npm init

输入之后会有一些项目名称、版本号、项目描述之类的设置，可以一直按回车，最后输入 y ，按默认方式设置。完成之后package.json文件中会有一些配置信息。
这里写图片描述
在项目中安装webpack

npm install webpack --save-dev

安装完成之后会多一个node_modules文件夹
这里写图片描述
在项目根目录下新建一个app文件夹，在 app 目录下添加 index.html 文件，代码如下：

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

在app文件夹中新建main.js文件，添加代码：

document.write("Hello world!");

然后使用 webpack 命令来打包：

webpack app/main.js app/bundle.js

编译完成之后如下：
这里写图片描述
现在打开index.html就可以看到页面上输出“Hello world！”了。

配置文件

除了使用上面的方法打包，还可以将一些编译选项放在配置文件中，统一管理。
在项目的根目录下建一个webpack.config.js文件，代码如下

module.exports = {
    entry: "./app/main.js",   // 入口文件
    //出口
   output: {
        path: __dirname +  "/app",  //打包后的文件路径
        filename: "bundle.js"   // 打包后输出的文件名
    }
};

然后直接在命令行输入