初识webpack-webpack的功能-webpack的初步使用
知识点掌握
1、webpack出现的意义:
webpack是node的一个包,该包的功能主要是用来构建前端的开发环境!
2、webpack解决的前端问题:
- 能够把以commonjs方式开发的前端代码转换成浏览器可以识别的代码
- 能够把各种前端非js的资源使用对应的loader转换成js,从而可以按照commonjs的方式进行加载
- 提供插件功能,完美配合市面上的其他工具进行环境构建。(比如bable)
webpack的使用流程和步骤及相关的命令
1、创建文件搭建目录格式
2、文件内写内容
3、安装webpack
- 初始化
- 安装webpack安装在开发环境
4、在根目录下创建配置文件
webpack.config.js
5、在webpack.config,js内写
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'src/index.js'), //入口文件
output: { // 输出
filename: 'index.js',//输出文件index.js
// 输出 存放到一个叫dist下的文件夹里(目录里自动生成
//dist文件夹文件夹内生成index.js)
path: path.join(__dirname, 'dist/')
},
mode: 'development',
module: {
rules: [{
test: /\.html/,
use: ['html-loader']
}]
}
}
6、安装(不安装会报错)
7、打包
npx webpack
8、自动生成dist文件夹
9、用打包以后dist文件夹下的index.js
更换路径
10、浏览器运行正常
11、续写列表页