这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

Webpack-01

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

• JS
• .js .jsx .ts（TypeScript）
• CSS
• .css .less .sass .scss
• Images
• .jpg .png .gif .bmp .svg
• 字体文件（Fonts）
• .svg .ttf .eot .woff .woff2
• 模板文件
• .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

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

1. 一个前端项目里面可能有多个 .js, 多个 .css , 多个静态图片， 多个其他前端资源。 当一个页面需要加载多个 .js 的话，也会拖累整个页面的加载速度，因为我们要发起很多的二次请求；
2. 要处理错综复杂的依赖关系，例如一些 js 资源彼此之间存在依赖关系。

什么是webpack?

• Webpack 是一个前端资源加载/打包工具（项目构建工具）。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
• webpack 提供了友好的模块化支持，以及资源的合并、打包、压缩、混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
• webpack官网

为什么要使用webpack

1. 一个前端项目里面可能有多个 .js, 多个 .css , 多个静态图片， 多个其他前端资源。 当一个页面需要加载多个 .js 的话，也会拖累整个页面的加载速度，因为我们要发起很多的二次请求；
2. 要处理错综复杂的依赖关系，例如一些 js 资源彼此之间存在依赖关系。

## webpack安装的两种方式

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
3. 查看webpack 信息 npm info webpack webpack -v

初步使用webpack打包构建列表隔行变色案例

1. 运行npm init初始化项目，使用npm管理项目中的依赖包
2. 创建项目基本的目录结构
3. 使用cnpm i jquery --save安装jquery类库
4. 创建main.js并书写各行变色的代码逻辑：

    import $ from 'jquery'
    // 设置偶数行背景色，索引从0开始，0是偶数
    $('#list li:even').css('backgroundColor','lightblue');
    // 设置奇数行背景色
    $('#list li:odd').css('backgroundColor','pink');
    

5. 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；

6. 运行webpack 入口文件路径 -o 输出文件路径对main.js进行处理： webpack ./src/js/main.js -o ./dist/bundle.js -o === --output

不通过配置文件打包方式
webpack4 默认不需要再创建webpack.config.js来配置打包的入口和出口；

默认情况下， webpack
入口为./src/index.js文件
出口为./dist/main.js文件
确保入口文件/src/index.js位置正确，在项目根目录下运行命令：
webpack  默认打包  (最新版的可以不用引入配置文件)
    

## 使用webpack的配置文件简化打包时候的命令

0. 在项目根目录中创建webpack.config.js
1. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

    // 导入处理路径的模块
    var path = require('path');
​
    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        // 多入口
        // entry:['./src/js/index.js','./src/js/one.js'],
        //entry: {
            //ind: './src/js/index.js',
            //on: './src/js/one.js'
        //},
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        // 多出口
        //output: {
         //   filename: 'js/webpack02.[name].js',
         //   path: path.resolve(__dirname, 'dist')
        //},
    }