【Webpack3.x】学习笔记（一）

最新推荐文章于 2024-07-23 16:39:39 发布

abloume

最新推荐文章于 2024-07-23 16:39:39 发布

阅读量1.1k

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/u013451157/article/details/78994957

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文环境：Visual Studio Code、Windows10

什么是Webpack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

我们可以从下图再次了解一下WebPack的作用:
这里写图片描述

安装WebPack

1）进入项目目录

mkdir webpack_demo  // 建立一个文件夹
cd webpack_demo     // 进入这个文件夹

注意：执行下一步前必须已安装node

2）初始化

npm init

输入完成后，npm终端会问你关于项目的名称，描述…，如果想默认直接跳过请在后面加上 -y 参数：

npm init -y

初始化完成后可以看到生成的package.json文件

在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等）。

3）安装 webpack 依赖

// 第一步：全局安装
npm install -g webpack  // 这个安装会提供一个全局的webpack命令。

// 第二步：项目安装
npm install --save-dev webpack  // 安装到项目里，这样webpack运行时才会require到这个包，这两步是必须的。

–save与–save-dev区别：

–save是对生产环境所需依赖的声明(开发应用中使用的框架，库)
–save-dev是对开发环境所需依赖的声明(构建工具，测试工具)

迅速上手第一个Demo

建立基本项目结构

进入之前创建的webpack_demo项目文件夹后建立两个文件夹，分别是src文件夹和dist文件夹：

src文件夹：用来存放我们编写的JavaScript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

可以理解为：src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。

开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。

编写程序文件

/dist/index.html

<!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>Document</title>
</head>
<body>
    <div id="title"></div>
    <script src="./bundle.js"></script>  // 这个文件现在还没有，这是用webpack执行打包命令后生产的文件。
</body>
</html>

src/entery.js

document.getElementById('title').innerHTML = 'Hello Webpack';

第一次Webpack打包

webpack src/entry.js dist/bundle.js  // webpack 入口文件 打包存放位置

执行结果如下图：
这里写图片描述

配置文件webpack.config.js

在 第一次打包webpack 中的终端打包方案，在实际开发中并不使用，而是使用webpack的配置文件的方式进行设置。

　　webpack.config.js就是Webpack的配置文件，这个文件需要在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。

module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

① entry 和 output

当我不用终端打包方案而采用webpack.config.js配置文件时：

单入口、单出口配置

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),  // path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。
        //输出的文件名称
        filename:'bundle.js'
    },
    ...
}

多入口、多出口配置

const path = require('path');
module.exports={
    entry:{   // 外部这个entry不能写错
        entry:'./src/entry.js',  //里面的这两个名字随便起
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'  // [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件
    },
    ...
}

对应的index.html

<div id="title"></div>
<script src="./entry.js"></script>
<script src="./entry2.js"></script>

② devServer

设置webpack-dev-server

安装

npm install webpack-dev-server --save-dev

安装完成之后需要设置下webpack.config.js中的devServer配置

devServer:{
    //设置基本目录结构
    contentBase:path.resolve(__dirname,'dist'),
    //服务器的IP地址，可以使用IP也可以使用localhost
    host:'localhost',
    //服务端压缩是否开启
    compress:true,
    //配置服务端口号
    port:1717
}

配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。
这里写图片描述
出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。

/package.json

"scripts": {
    "server":"webpack-dev-server --open"
},

配置好保存后，在终端里输入 npm run server 打开服务器并自动打开浏览器就可以看到结果了。

支持热更新

在npm run server 启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。

③ module

Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。

简单的举几个Loaders使用例子：

可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
可以把React中的JSX转换成JavaScript代码。

Loaders的配置模型

test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）。

打包CSS文件

./src/css/index.css

body{
    background-color: red;
    color: white;
}

CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。

/src/entery.js中在首行加入代码：

import css from './css/index.css';

CSS和引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。

npm install style-loader --save-dev
npm install css-loader --save-dev

loaders配置

webpack.config.js

//模块：例如解读CSS,图片如何转换，压缩
module:{
    rules: [
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
    ]
},

loader的三种写法

第一种写法：直接用use

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
},

第二种写法：把use换成loader

module:{
    rules:[
        {
            test:/\.css$/,
            loader:['style-loader','css-loader']
        }
    ]
},

第三种写法：用use+loader的写法

module:{
    rules:[
        {
            test:/\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
        }
    ]
},

④ plugins

未完待续…

abloume

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Webpack3.x】学习笔记（一）

本文环境：Visual Studio Code、Windows10什么是Webpack？ WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。我们可以从
复制链接

扫一扫

专栏目录