vue第一单元(初识webpack-webpack的功能-webpack的初步使用)
阅读原文时间:2023年07月08日阅读:3

#课程目标

  1. 了解webpack出现的意义,以及webpack解决的前端问题

  2. 掌握webpack的使用流程和步骤

  3. 掌握webpack相关的命令

  4. 了解webpack的打包原理

#知识点

  1. webpack是node的一个包,该包的功能主要是用来构建前端的开发环境!

  2. webpack主要核心功能有三点:

    • 能够把以commonjs方式开发的前端代码转换成浏览器可以识别的代码
    • 能够把各种前端非js的资源使用对应的loader转换成js,从而可以按照commonjs的方式进行加载
    • 提供插件功能,完美配合市面上的其他工具进行环境构建。(比如bable)
  3. webpack使用流程

    • 使用命令 npm install webpack --save-dev本地安装webpack
    • 使用命令 npm install webpack-cli -save-dev本地安装webpack-cli
    • 在项目根目录创建 webpack.config.js,并编写必要配置
    • 在命令行执行 npx webpack命令,查看打包结果
  4. webpack相关命令 请参阅 cli文档

  5. 简单阅读webapck打包后的代码,理解wabpack把commonjs格式的代码转换成浏览器可以识别的代码的原理。

#授课思路

#案例和作业

参考以下网站

看看会员

使用webapck搭建出对应的开发环境,考虑如下问题:

  1. 该项目有三个页面,最后希望这三个页面可以相互跳转
  2. 如何以模块化(commonjs)的方式开发
  3. 在模块化构建的时候,如何处理css、html、图片类的文件。

参考以下目录结构和配置项

|-- kankanvip
    |-- package-lock.json
    |-- package.json
    |-- webpack.config.js
    |-- dist
    |   |-- index.html
    |   |-- index.js
    |   |-- list.html
    |   |-- list.js
    |   |-- privilege.html
    |   |-- privilege.js
    |-- src
        |-- assert
        |-- common
        |-- page
        |   |-- index
        |   |   |-- index.js
        |   |-- list
        |   |   |-- index.js
        |   |-- privilege
        |       |-- index.js
        |-- template
            |-- index.html
            |-- list.html
            |-- privilege.html

webapck.config.js中的内容

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        'index': path.join(__dirname, './src/page/index/index.js'),
        'list': path.join(__dirname, './src/page/list/index.js'),
        'privilege': path.join(__dirname, './src/page/privilege/index.js')
    },
    mode: 'development',
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/template/index.html'),
            filename: 'index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/template/list.html'),
            filename: 'list.html',
            chunks: ['list']
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/template/privilege.html'),
            filename: 'privilege.html',
            chunks: ['privilege']
        })
    ]
}