webpack打包工具的安装和使用

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已成功搭建并启动了服务器。
这里写图片描述

展开阅读全文

没有更多推荐了,返回首页