速学Webpack（一）--基础教程篇

1.Webpack是什么？

webpack是一个功能强大的模块打包工具。可以处理各种各样的文件。

2.什么是模块化打包工具？

就是把各个模块打包在一起。可以识别各种各样的模块化规范。
例如：amd，cmd，commondjs，es6。
webpack官方介绍
模块化相关api

3.安装Webpack

1.第一步：安装node环境：官网地址
2.选择一个文件夹，执行npm init。来创建一个符合webpack的项目。完成后，生成一个package.json的文件。

3.webpack安装命令：npm install webpack webpack-cli -D
安装成功后查看版本：npx webpack -v

4.新建js文件

1.在src目录下建两个文件：index.js入口文件,内容文件content.js

export default Content =()=>{
    document.write('内容')
}

import Content from './content'
new Content()

5.编写webpack配置文件 webpack.config.js。

const path =require('path')//引入node的一个包
module.exports ={
    entry:'./src/index.js',//打包入口
    output:{//导出出口
        filename:'bundle.js',//文件名
        path:path.resolve(__dirname,'bundle')//绝对路径 __dirname
    }
}

6.添加脚本

在package.json文件中添加如下脚本(当然也可以直接执行命令 npx run webpack,这样写是为后续添加命令参数做准备)

然后控制台执行npm run bundle

这时会发现多了一个bundle文件夹,和一个bundle.js文件,里面的类容就是打包后的内容

以上就是最基本的webpack使用,如果有任何疑问,请贴图在评论区.