前端项目构建工具-webpack入门

最新推荐文章于 2024-07-28 00:56:04 发布

笑笑是一个码农

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量831

点赞数

分类专栏： HTML/CSS/JS 文章标签： webpack node.js npm html css

本文链接：https://blog.csdn.net/u012430402/article/details/95528023

版权

HTML/CSS/JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

欢迎关注我的个人微信公众号，领取精美前后端全栈学习资料~

一、什么是webpack

webpack是基于Node.js开发出来的一个用于前端项目构建的工具，它能很方便的对前端的静态资源文件进行管理、打包，Webpack传送门

二、安装与初步使用

1、首先确保已安装Node.js环境(npm)，Node.js传送门

2、全局安装命令

npm i webpack@3.6.0 -g

“@“”符号用于指定webpack的版本，不指定会安装最新版本的webpack，目前新版本已经有4.x.x以上了，我这里使用的是3.6.0版本来学习

3、在项目中安装

在项目的根目录下执行如下命令

npm i webpack@3.6.0 --save-dev

说明：--save-dev等同于 -D ，表示安装的插件用于开发环境

4、创建好工作目录，项目的根目录下执行如下命令，使用npm来管理项目中依赖的包

工作目录

npm init -y

执行完后会发现项目目录下多了个package.json文件

5、安装JQuery

npm i jquery --save

说明：--save等同于 -S，表示安装的包用于生产生产环境

6、使用JQuery

在main.js中当如JQuery，并书写JQuery的相关测试函数，如下：

//导入JQuery
import $ from 'jquery'

const $ = require('jquery')


$(function(){

    $("#button").click(function(){
        alert("webpack测试");
    });

});

接着在index.html中引入main.js，并书写测试代码，如下：

<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>首页</title>

    <!-- 引入main.js -->
    <script src="./main.js"></script>

</head>
<body>
    <h1>这是测试页面</h1>
    <input id="button" type="button" value="webpack测试"/>
</body>
</html>

这一切看起来似乎没什么问题，但是当我们在浏览器打开index.html，点击按钮并不会有任何反应，F12打开控制台，可以看到如下错误

这是由import语法是ES6的语法，浏览器并不支持，这时候，就需要使用webpack来帮助我们了，首先，确保全局环境下已经安装了webpack，接着在项目的根目录下执行如下命令

webpack ./src/main.js ./dist/bundle.js

./src/main.js 表示指定需要webpack处理(打包)的js文件目录(main.js是项目的JS入口文件)， ./dist/bundle.js表示经过webpack处理(打包)后输出的新文件的目录，bundle.js文件名任意，推荐使用bundle命名

执行完命令之后，我们会发现在dist目录下会生成一个bundle.js的文件，我们在index.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>首页</title>

    <!-- 引入main.js -->
    <script src="../dist/bundle.js"></script>

</head>
<body>
    <h1>这是测试页面</h1>
    <input id="button" type="button" value="webpack测试"/>
</body>
</html>

然后在浏览器打开index.html，点击按钮，效果如下

这时我们可以发现，JQuery点击事件成功被触发！

但是，我们不妨想象一下，当我们每次修改main.js后，都要运行webpack ./src/main.js ./dist/bundle.js 这一长串的打包命令是非常麻烦的，有没有什么简单的命令可以代替呢，答案是显而易见的

首先，在项目的根目录下创建webpack.config.js文件，然后加入如下配置内容

//路径操作要使用Node中的path模块
const path = require('path')


//该配置文件其实就是一个JS文件，通过Node中的模块操作，向外暴露一个配置对象
module.exports ={ // __dirname表示当前项目的完整路径
    entry: path.join(__dirname, './src/main.js'), //配置入口文件路径，表示要使用webpack打包哪个文件
    output:{
        //输出文件配置
        path: path.join(__dirname, './dist'), //指定打包好的文件输入的目录
        filename: 'bundle.js' //指定输出文件的文件名称
    }
}

其次我们修改main.js中alert的内容变为 “webpack哈哈哈”，

接着在项目的根目录下执行如下命令