webpack打包工具的安装和使用

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

小羽曜努力

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

阅读量1.8k

点赞数 1

文章标签： webpack

本文链接：https://blog.csdn.net/fly821760648/article/details/80757789

版权

1.什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

2.安装webpack

win+r，输入cmd然后回车，进入命令提示符。
这里我们使用npm来安装webpack。（需要安装node.js，还未安装node.js的小伙伴可以去看博主的上一篇博客，）
安装命令：npm install -g webpack
然后等待安装即可。
这里写图片描述

3.创建package.json文件

package.json文件包含了项目名称，项目描述，作者等一系列信息。
创建命令：npm init
在项目的根目录（笔者这里是E:\webpack_workplace）输入命令按回车键后，会弹出一系列信息，若无需更改，回车即可跳过。然后进入项目的根目录会发现多出了一个package.json的文件。
这里写图片描述

用编辑器打开package.json，在scripts下进行更改，方便以后的打包。其中，built是用来打包的，start是用来开启本地服务器的。

4.导入node_modules

命令：npm install –save-dev webpack
在项目的根目录（笔者这里是E:\webpack_workplace）输入命令按回车键，等待安装完成后，进入项目根目录会发现里面多了一个node_modules文件夹，里面存储的就是webpack打包时需要用到的一些依赖文件。
这里写图片描述

5.配置webpack.config.js文件

在项目的根目录创建webpack.config.js文件（必须为这个名字）
这里写图片描述
上图是笔者的项目结构，src/js下的app.js文件为入口文件。dist下的bundle.js为入口文件。node_modules里面是依赖文件。webpack_config.js文件的内容需要根据自己的项目结构来自行编写。

//webpack.config.js
module.exports={
    //入口文件
    entry:'./src/js/app.js',
    //出口文件
    output:{
        path:__dirname+"/dist",
        filename:"bundle.js"
    },
    //需要依赖的插件或者装载器
    module:{
        rules:[
            {test:/\.css$/,loader:"style-loader!css-loader"}
        ]
    }
}

6.依赖文件的安装

css依赖有两个，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
css依赖安装命令：npm install –save-dev style-loader css-loader
这里写图片描述
jquery依赖安装命令：
npm install jquery –save

7.入口文件的编写

笔者这里的入口文件是src/js下的app.js文件。

//app.js
let $=require("jquery");
require("../css/style.css");
let people=require('./people.js');
$.each(people,function(key,value){
    $("body").append("<h1>" + people[key].name +"</h1>");
});
for(var i=0;i<=people.length-1;i++){
    console.log(people[i].name);
}

src/js下的people.js文件。

//people.js
let people=[
    {name:"name1"},
    {name:"name2"},
    {name:"name3"}
];
module.exports=people;

src/css下的style.css文件

/*style.css*/
body{
    background: skyblue;
}

编写完成后。进入命令提示符，进入项目根目录，输入webpack –mode development即可进行打包（因为笔者使用的是webpack4，所以这里要写成webpack –mode development），打包完成后，将会在根目录的dist文件下输出一个bundle.js文件。html文件将引用这个文件，对已打包的文件进行使用。
下面是index.html文件，没有引用people.js文件和style.css，仅引用了bundle.js文件。

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

这里写图片描述

8.webpack搭建服务器

安装依赖
命令：npm install –save-dev webpack-dev-server
这里写图片描述
而服务器的启动，我们在第三步的时候已经编写好了package.json文件。所以这里我们只需要直接启动即可。进入命令提示符，进入项目根目录，输入:npm start，回车。可以发现我们的项目可以在localhost:8081下运行。
这里写图片描述
在浏览器上输入localhost:8081，发现与直接网页打开的index.html文件是相同的。即说明webpack已成功搭建并启动了服务器。