webpack学习笔记-Day1

1. webpack概念的引入

在网页中会引用哪些常见的静态资源？

- JS

　　　　　　- .js .jsx .coffee .ts (TypeScript)

　　　　- CSS

　　　　　　- .css .less .scss

　　　　 - Images

　　　　　　- .jpg .png .gif .bmp .svg

　　　　- 字体文件(Fonts)

　　　　　　- .svg .ttf .eot .woff .woff2

　　　　- 模板文件

　　　　　　- .ejs .jade .vue (在webpack中定义组件的方式，推荐使用)

网页中引入的静态资源多了以后会有什么问题？

　　　　1. 网页加载速度缓慢

　　　　2. 要处理错综复杂的依赖关系

如何解决上述两个问题？

　　　　1. 合并、压缩文件，精灵图、图片的Base64编码

　　　　2. 可以使用requireJS，也可以使用 webpack 解决各个包之间的复杂依赖关系

什么是webpack？

　　　　webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

如何完美实现上述的两种解决方案？

　　　　1. 使用 gulp，是基于 task 任务的（小巧灵活）

　　　　2. 使用 webpack，是基于整个项目进行构建的

　　　　- 借助 webpack 这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等功能。

2. node.js 的 path 模块

webpack.config.js 配置文件中会使用到 path 模块，先来讲一下 path.join() 和 path.resolve() 的区别：

path.join([path1][, path2][, ...])

用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"\"。

path.resolve([from ...], to)
将 to 参数解析为绝对路径，给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径。例如，给定的路径片段的序列为：/foo、/bar、baz，则调用 path.resolve('/foo', '/bar', 'baz') 会返回 /bar/baz。

const path = require('path');
let path1 = path.resolve(__dirname, '/dist/js') // path.resolve() 一般不要这样写，/dist会覆盖前面的根目录
let path2 = path.resolve(__dirname, './dist/js')
let path3 = path.resolve(__dirname, 'dist/js')
let path4 = path.join(__dirname, 'dist/js')
let path5 = path.join(__dirname, '/dist/js')
let path6 = path.join(__dirname, './dist/js')
let path7 = path.resolve('/foo/bar', '/tmp/file/') 
let path8 = path.join('/foo/bar', '/tmp/file/')

2. webpack.config.js 最基本的配置文件

　　预置条件：安装node

我们先创建一个 webpack-demo 的文件夹，里面有 src 和 dist 两个目录，src 下面创建 js、 css、images、index.html、main.js (入口文件)，

一、初始化： npm init -y （会生成 package.json ）

　二、webpack 4X 后需要安装webpack-cli ： npm install -g webpack-cli

三、安装 jquery： npm i jquery -S （生成 node_modules 文件夹）

注意：在 webpack 中，不要使用 <script> 引入依赖文件，在main.js 入口文件中通过 import xx from xx （ es6语法）来引用

// index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/js/main.js"></script>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

// main.js 入口文件

import $ from 'jquery'
$(function() {
    console.log($);
    $('li:odd').css('backgroundColor', 'skyblue');
    $('li:even').css('backgroundColor', function() {
        return '#' + 'D97634';
    });
})

/* 1. webpack能处理JS文件的相互依赖关系
*  2. webpack 能处理JS的兼容问题，把高级的、浏览器不能识别的语法，转为低级的能正常识别的语法
*  webpack  要打包文件的路径  打包好输出文件的路径
*/

三、当我们在控制台，直接输入 webpack 命令执行的时候， webpack 做了以下几步操作：

　　1. 首先，webpack 发现，我们并没有通过命令的形式，指定入口和出口

　　2. webpack 就会去项目的根目录中，查找一个叫做 `webpack.config.js` 的配置文件

　　3. 当找到配置文件后，webpack 会解析执行这个配置文件，当解析执行完后，就得到了配置文件中导出的配置对象

　　4. 当 webpack 拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建

// webpack.config.js 文件

const path = require('path');
module.exports = {
    mode: 'development', // 打包为开发模式
    // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件
    entry: {
        main: './src/main.js'
    }, // 入口文件，从项目根目录指定
    output: { // 输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, '/dist/js'), // 将js打包到dist/js的目录
        filename: "[name].js" // 使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
    }
}