初识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']
        })
    ]
}