【webpack】1. 快速入门

webpack学习

【webpack】1.快速入门
 【webpack】2.webpack核心–loader
【webpack】3. 将入口html也打包
 【webpack】4. webpack-dev-server思考
 【webpack】5.开发和生产模式的配置加载

文章目录

webpack学习
为什么用webpack
Webpack的工作方式
webpack安装与配置

简单

思考
webpack多入口配置（多页面）

为什么用webpack

因为前端有个坑，就是浏览器在解析js时，没有像其他语言那样做到js文件的模块化，一个文件要想另一个文件暴露出一个数据和变量，只能把它定义在全局下。window.XXX。比如一个html引入了a.js和b.ja，a.js里需要用b.js里的msg，那在b.js里就要把这个变量定义成winodw.msg=‘yo’。但这样会出问题，如果引入的是外部的库，也有可能会多人同时开发，全局变量会发生冲突。无法在文件之间共享一部分数据或代码。
所以后来出现了node，node是用来跑js，和浏览器一样，不过是跑在操作系统上的。在node模式下就不需要全局变量，在node的眼里所有的文件都是一个模块，任何的模块都可以由两个口（入口和出口），如下
b.js: 把msg暴露出去

let msg='yo';
let text='hello world';
module.exports={msg:msg};

a.js require b.js 就引入了b.js的出口

let msg=require('./b').msg;
console.log('msg',msg);

这样每个文件只要管好自己的入口和出口就可以了
在terminal运行 node a.js即可看到结果：yo

但我们用写后端语言的方式写前端代码，在node里可以跑，在浏览器里就跑不了了，因为它没有这种模块化的体系，所以这就需要webpack，可以动态得把后端代码变为浏览器可以读懂的代码，后端代码前端化。同时也可以把很多js文件打包成一个文件，html在引入时直接引入该文件即可。简而言之，webpack是个模块化构建工具。

Webpack的工作方式

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
在这里插入图片描述

webpack安装与配置

简单

以之前的a.js b.js为例
在该项目目录下

npm init -y # npm初始化，生成package.json文件
npm i webpack webpack-cli -D # 安装webpack和webpack-cli

生成一个package.json，npm会认为整个目录是一个项目
也生成了一个node_modules文件夹
在这里插入图片描述
如果想将a,b打包需要运行node_modules/.bin这个路径下的webpack文件，如上图
在termianl中输入（a.js里用了b.js的变量）

 node_modules/.bin/webpack a.js pack.js

该目录下此时会多一个park.js（a,b打包后的文件），可将其直接引入html文件中
在这里插入图片描述
但一般不这么做，为了方便都会在package.json下的script中加上快捷命令

  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "pack": "node_modules/.bin/webpack a.js pack.js"//a.js入口文件 pack.js出口文件
 }

那么运行的时候直接在terminal输入以下命令即可，即执行了node_modules/.bin/webpack a.js pack.js

npm run pack

由于webpack配置项非常多，一般会把其写在一个文件里而不是在script里写全，当前文件夹下新建一个js文件叫，webpack.config.js，webpack启动时要读取配置文件，参数–config指定读取哪个配置文件，如果没有使用–config指定，会默认在根目录中找webpack.config.js或webpackfile.js这个文件,有关配置文件的命名随意定，但最好带上环境，如webpack.base|dev|prod.conf.js。在里面写上

module.exports={
    entry:'./a',//入口文件
    output:{//出口
        filename:'pack.js',//文件名
        path:__dirname//当前目录下
    }
}

从 context 文件夹开始
查找 entry 对应的文件
(找到文件之后)读取文件内容. 每当遇到 import (ES6) 或者 require() （Node）依赖项时, 它会解析这些代码, 并且打包到最终构建里. 接着它会不断递归搜索实际需要的依赖项, 直到它到达了“树”的底部.
递归完所有依赖之后, Webpack 会将所有东西打包到 output.path 对应的目录, 并将 output.filename 的值作为最终的资源名([name] 表示使用 entry 项的 key).

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "node_modules/.bin/webpack"
  },

这样就完成了webpack的安装与配置,可以直接运行npm run park，在浏览器中打开index.html。这样就没问题了，浏览器也可以识别，看控制台运行结果
在这里插入图片描述

思考

运行vue项目的时打开的是localhost:端口号，而运行该index.html的地址是file:///C:/learning/javascript/webpackLearning/index.html，即打开的本地文件。原因就是vue里用到了webpack-dev-server，是一个用来快速搭建本地运行环境的工具。

（webstorm自带了一个本地服务器，打开地址是http://localhost:63342……）

webpack多入口配置（多页面）

有时候开发的不止一个页面，每个页面有自己的js，比如有两个html,首页和注册页:index.html和signup.html。新建一个page文件夹放这两个html，另新建个js文件夹放base.js, home.js和signup.js.
base.js里有个open变量用来控制home和signup，home.js中要使用open（代表网站是否开放注册），只有open为真，才会显示‘注册链接’。signup.js中也要使用open，open为真显示‘欢迎’，为假显示‘暂不开放注册’。也就是index.html和signup.html页面的js都会用到base.js里的变量，就需要webpack来进行模块化构建
建立目录如下：
在这里插入图片描述
以上a.js和b.js是node的写法export和require，还可以用es6的写法，export和import，性能更好，下面代码改用es6，具体写法可见es6模块化写法
如果用es6,更改base.js为
base.js

var open = true
export {open}

home.js

import {open} from './base';
if (open) {
    document.body.innerHTML = `<a href="signup.html">注册</a>`
}

signup.js

import {open} from './base'
if (open) {
    document.body.innerHTML = `<h1>欢迎</h1>`
} else {
    document.body.innerHTML = `<h1>暂不支持注册</h1>`
}

多页时，修改webpack配置文件webpack.config.js

module.exports={
    entry: { //入口有两个，打包出来也是两个
        home: './js/home.js',
        signup: './js/signup.js'
    },
    output:{//出口
        filename:'[name].bundle.js',//文件名 【原文件名】.bundle.js
        path:__dirname + '/dist'//存放在：当前目录/dist
    }
}

package.json和之前a.js，b.js时配置的一样 “pack”: “node_modules/.bin/webpack”
在terminal执行 npm run pack, 打包完成，打包成功后的目录为在这里插入图片描述
再在page/index.html和signup.html下引入各自的js
index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <script src="../dist/home.bundle.js"></script>
    </body>
</html>

signup.html也是一样，在body里加 < script src="…/dist/signup.bundle.js">< /script>
然后本地运行index.html得到
在这里插入图片描述
点击注册，因为open为真，所以到signup页面

像这样的多页的应用都会给每一页一个打包的地址，具体用到了哪些依赖交给webpack就行