您的位置：首页 > Web前端 > Webpack

webpack安装配置

2017-10-16 17:41 393 查看

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",  //打包后的文件路径
filenam
83a1
e: "bundle.js"   // 打包后输出的文件名
}
};

然后直接在命令行输入

webpack

这样也可以生成 bundle.js 文件，打开index.html文件同样会输出“Hello world！”

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航