初识webpack-webpack的功能-webpack的初步使用

第一单元（初识webpack-webpack的功能-webpack的初步使用）

知识点

1.webpack是node的一个包，该包的功能主要是用来构建前端的开发环境！
2.webpack的主要核心功能有三点：
- 能够把以commonjs方式开发的前端代码转换成浏览器可以识别的代码
- 能够把各种前端非js的资源使用对应的loader转换成js，从而可以按照commonjs的方式进行加载
- 提供插件功能，完美配合市面上的其它工具进行环境构建。（比如babel）
3.webpack使用流程
- 使用命令npm i webpack --save-dev 本地安装webpack
- 使用命令npm i webpack-cli --save-dev 本地安装webpack-cli
- 在项目根目录创建 webpack.config.js,并编写必要配置
- 在命令行执行npm run build/webpack/npx webpack命令，查看打包结果
4.webpack相关命令
请参阅 [cli文档]（https://www.webpackjs.com/api/）
5.简单阅读webpack打包后的代码，理解webpack把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

webpack.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']
        })
    ]
}