webpack学习之路-----2.快速上手一个小demo

在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

扫描二维码关注公众号，回复： 2734874 查看本文章

在终端用live-server打开网页，没安装的话先安装

npm install -g live-server

webpack学习之路-----2.快速上手一个小demo

建立基本项目结构

猜你喜欢