webpack初体验

在使用webpack打包之前我们应该理解一下npm，npm是node.js默认的软件包管理系统，所有应该先下载node，node官网地址：http://nodejs.cn,下载了node之后，cmd命令进入命令提示框，使用node -v命令查看node有没有安装好，然后执行命令npm install npm -g，实现全局安装npm,这个时候，我们的npm就已经安装完毕了。

那现在应该如何使用webpack呢？别急，我们一步一步来

为了方便演示，我们使用的软件是vscode,我们在桌面上新建一个文件夹，命名为example

1:以管理员模式进入vscode

2:进入终端

3：2: 命令 npm init --yes自动生成webpack.json文件（查看所有版本信息），

在该文件的scripts中是可以被执行的命令（npm run 命令）,dependcies:运行时依赖

devdependcies:开发时依赖，上线后不要，

3：安装要安装的包，（比如我这里要安装jquery:npm install jquery -g）会自动生成package-lock.json和node_modules(文件夹，放已经安装的包和package-lock.json),webpack:打包文件默认入口是src下面的index.js

所有的准备工作我们已经做完了，那到底怎样打包呢？

1：1:要安装的： webpack webpack-cli -D

2:在主目录下建立src文件夹（用来放写的源代码）

3:在src下面写各种js代码，必须要写一个index.js(入口)

3：打包：webpack --mode development(production),自动打包在dist(自动生成)下的main.js中（production全是压缩的代码）
4:在文件中，引入资源：require,暴露资源：module.exports(自己可以百度一下)

webpack的5个核心概念：

在主项目下面建立webpack.config.js文件（是webpack的配置文件），文件中：

1：entry:入口

2：output:出口

3：loader:(打包css,img...)

4: plugins:打包html

5: mode:模式（development/production）

webpack.config.js文件中最基本的模板：



const {resolve}=require('path')

module.exports={
    //入口
    entry:'./src/index.js',
    //出口
    output:{
        filename:'xxx.js ',
        path:resolve(__dirname,'build')   //要打包到build文件夹下面的xxx.js文件下
    },
    module:{
        rules:[]
    },
    plugins:[],
    mode:"development",
}

然后在终端webpack一下就可以了，看有没有生成打包文件哟？如果有多个入口文件的时候

 entry:['1.js','2.js'...]      //数组格式写入(打包成一个),其余的不变

多个入口的时候：对象格式



   entry:{                      //对象形式：打包成多个，名字叫下标（one,two）
       one:'1.js',
       two:'2.js'
   }
filename:[name].js

多个入口的时候：特殊格式(既有对象，也有数组)

entrty:{
one:['a.js','b.js'],         
two:'c.js'                      //对象形式：打包成多个，名字叫下标（one,two）
}
filename:[name].js

这就是我们使用webpack的第一次打包喔，大家有没有成功呢？

webpack初体验

推荐阅读更多精彩内容