在1.安装中我在mac操作系统已经讲解了一个创建小demo 的模板,没看过的同学可以过去看一下。这篇文章主要讲解在window操作系统上的创建一个小demo,mac上创建的命令跟今天这篇文章讲的有些不一样,大家可以看一下,丰富一下知识面。
下面正式开始我的表演了:
下面引用技术胖的一段话进行概括:
建立基本项目结构
首先进入上节课我们建立的webpack_demo目录(每个人建立的位置不同,可能建立在了D盘或者E盘)。进入后在根目录建立两个文件夹,分别是src文件夹和dist文件夹:
- src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。
- dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。
你可以理解成src是源码文件,dist是我们编译打包好的文件;一个用于开发环境,一个用于生产环境。
这是我第一次接触webpack,所以我直接把index.html文件放在了dist文件夹下面,以后的操作中不会这样做。
<!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>ferrysoul webpack Lesson</title>
</head>
<body>
<div id="title"></div>
<script src="./entry.js"></script>
<script src="./entry2.js"></script>
</body>
</html>
document.getElementById('title').innerHTML="Hello ferrysoul";
下面配置一个文件进行打包,文件名字为webpack.config.js
const path=require('path');
module.exports={
entry:{
entry:'./src/entry.js',
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
module:{},
plugins:[],
devServer:{}
}
webpack4.x的打包方式进行了修改,是:
webpack .\src\entry.js --output .\dist\bundle.js
在终端用live-server打开网页,没安装的话先安装
npm install -g live-server