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

初识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、续写列表页