webpack安装以及基本配置

最新推荐文章于 2024-05-14 13:01:37 发布

connie__wu

最新推荐文章于 2024-05-14 13:01:37 发布

阅读量615

点赞数 1

分类专栏： webpack 文章标签：模块化开发工具

本文链接：https://blog.csdn.net/connie_1990/article/details/72851715

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

webpack简介

webpack是基于模块化开发的一个工程化开发工具，因此在webpack中，任何资源（图片、css等等）都可以作为模块加载进来（当然加载的时候需要一些load加载机）。

这个工具的模块化规范基于commojs的，也支持amd，cmd规范，但是建议我们使用commomjs规范，因此我们可以像书写node一样书写项目。

Webpack是由react推动的（react文件都是由webpack编译的），因此react相关的demo很多都是基于webpack实现的，所以对于react的相关处理插件，webpack是最丰富的。当然gulp插件也是可以处理react的。

webpack安装：npm install –g webpack
查看版本号：webpack –v

使用webpack处理项目，跟gulp一样，都需要一个配置文件,文件名称为webpack.config.js，我们在这个文件中，定义我们的功能，我们通常将配置定义在暴露的接口中，如下所示：

module.exports = {
    // 在这里定义配置
    // 定义入口文件
    entry:'./js/app.js',
    // 定义文件的发布位置
    output:{
        path:'/demo',
        filename:'dist.js'
    }
}

Entry定义文件入口，可以是一个字符串，表示一个入口文件，也可以是一个对象，表示多个入口文件。
Output定义文件发布的位置是一个对象。
- Path:定义发布文件的目录，如果不定义该属性，路径可以写在filename属性中。
- Filename：定义发布文件地址（通常与上面定义的entry对应）。
- 当entry定义成对象的时候，（此时入口文件有多个，我们要将filename定义成）[name].js

head.js

module.exports = function () {
    console.log('head module')
}

foot.js

module.exports.say = function () {
    console.log('foot say function')
}

app.js

var head = require('./head')
var foot = require('./foot')

head();
foot.say();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <!--定义个webpack入口文件-->
<script type="text/javascript" src="demo/dest.js"></script>
</body>
</html>

webpack.config.js

module.exports = {
    // 在这里定义配置
    // 定义入口文件
    entry:'./js/app.js',
    // 定义文件的发布位置
    output:{
        path:'/demo',
        filename:'dest.js'
    }
}

输入webpack命令，就可以生成demo/dest.js文件
可以看到dest.js文件把所有的模块都打包到了一个js文件中，在引用的过程中类似于本地模块加载，所以可以采用require的方式进行模块引用。

入口设置为多个文件
js
|__head.js
|__foot.js
|__app.js
|__app1.js
index.html
webpack.config.js

app1.js

var head = require('./head')
head();
console.log("Hello, I'am app1");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--定义多个webpack入口文件-->
<script type="text/javascript" src="gulp/dest.js"></script>
<script type="text/javascript" src="gulp/dest1.js"></script>
</body>
</html>

webpack.conf.js

module.exports = {
    // 在这里定义配置
    // 此时定义的entry是一个对象，入口为多个文件
    entry:{
        dest:'./js/app.js',
        dest1:'./js/app1.js'
    },
    output:{
        filename:'./gulp/[name].js'
    }
}

配置还是非常简单的：）

前面我们提及的都是webpack的本地发布，如何在服务器上发布呢？

Webpack中有一个插件，提供了服务器服务，通过这个服务器，我们可以预览我们的项目，webpack-dev-server