wenpack新手教学

最新推荐文章于 2021-08-04 07:00:05 发布

攻城狮狮

最新推荐文章于 2021-08-04 07:00:05 发布

阅读量299

点赞数

分类专栏： webpack js node

本文链接：https://blog.csdn.net/wodebokecsdn/article/details/87288082

版权

js 同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

node

10 篇文章 1 订阅

订阅专栏

webpack

4 篇文章 0 订阅

订阅专栏

今天学习一下webpack，因为一直在用vue-cli来做项目，一直不明白webpack也不太了解，今天就简单的记录了一下学习过程。相信好多人对webpack也不是很了解

确保自己电脑装有node.js和全局安装webpack，webpack现在已经是4.0了只全局安装webpack不行会让你继续安装webpack-cli，因为webpack的命令行工具都在cli中，4.0之前都在一个包里，之后为了便于管理就分开了，继续安装就行然后执行webpack -v查看一下版本，确保webpack已经安装好。

cnpm install -g webpack
cnpm install -g webpack-cli

首先我们建一个空的文件夹叫做wenpackdome。

执行命令 npm init 来生成package.json文件。

首先我们创建一个index.html用来作为我们的页面里面内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="mydiv"></div>
</body>
<script src="./public/bundle.js"></script>
</html>

在这里引用了./public/bundle.js 是因为之后咱们会将打包好的js放到这个文件夹下。

在根目录建立文件greeter.js 作为一个模块js文件或者说第三方的js文件内容如下：

并依据CommonJS规范导出这个函数为一个模块：

module.exports = function(){
    var geet = 'hello webpack woshimingling'
    return geet
}

根目录下建立文件夹app 里面建立文件main.js作为主入口,内容如下：

在这里用require引入此模块，将内容展示在页面

var con = require('../greeter.js')
var dom = document.getElementById('mydiv')
dom.innerHTML = con();

通过配置文件来使用`Webpack`

接下来我们创建webpack的配置文件，在根目录建立webpack.config.js文件，内容如下：

module.exports = {
    entry: __dirname + "/app/main.js",//唯一入口文件，__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
    output: {
        path:__dirname + '/public',//打包后的文件存放的地方
        filename:'bundle.js'//打包后输出文件的文件名
    },
    mode: 'development' // 设置mode
}

有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项，示例如下：

此时看到webpack同时编译了main.js和greeter.js

就会自动生成bundle.js,此时打开index.html会看到hello webpack woshimingling

我们已经成功的使用Webpack打包了一个文件了。不过在终端中进行复杂的操作，其实是不太方便且容易出错的，接下来看看Webpack的另一种更常见的使用方法

更快捷的执行打包任务

在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。

在scripts中添加"build":"webpack",意思是当我执行npm run build 的时候就相当于在命令行输入了webpack了，就跟我们用vue-cli一样的了。

接下来我们加一个用node.js搭建的服务器，以便于在服务器跑我们的项目，

在根目录建立server.js文件，在命令窗口执行cnpm install --save express

var express = require('express')

var app = express();
 app.get('*',(req,res)=>{
     res.sendFile(__dirname+req.path)
 })
 app.listen(8888,()=>{
     console.log('服务器开启成功')
 })

开启服务：在命令窗口执行 node server

提示服务器开启成功则我们就可以在浏览器输入http://localhost:8888/#/ 页面就会显示hello webpack woshimingling

此时我们想做成跟vue-cli一样的就是可以用npm run dev 来开启服务，咱们就得去package.json区配置了见上图"dev":"node server", 执行npm run dev 就可以开启服务了。

webpack还有很多强大的东西，今天就到这里，以后接着写。