Webpack 4 学习01（基础配置）

迷南。 2022-03-07 03:00 253阅读 0赞

# Webpack 4 学习（基础配置和js文件的打包） #

## 一、安装配置 ##

*  【**前提**】安装`node.js`环境
    
    【官网下载】[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]  
    **安装教程不赘述**
 *  创建项目文件夹
    
    例如创建如下文件夹`webpack_demo1`
    
    ![3077424659-5c7f21b1b7569_articlex][]
 *  创建配置项
    
        npm init -y
    
    生成一个`package.json`文件 如下图
    
    ![3421328062-5c7f21b5aa6ca_articlex][]
 *  全局安装`webpack` **（不推荐，进行下一步操作）**
    
        npm install webpack -g
 *  局部安装`webpack`**(推荐)**
    
        npm install webpack --save-dev
    
     *  另外，`webpack 4`要求安装包
    
        npm install webpack-cli --save-dev

一起安装

npm install webpack webpack-cli --save-dev

**以下表示安装成功**

![4264293866-5c7f21bad9b4b_articlex][]

*  创建入口文件
    
        ./src/index.js
    
    ![3819642765-5c7f21b065e51_articlex][]
    
    任意编写`index.js`文件内容用于测试

*  配置生产和开发模式
    
    打开`package.json`文件添加如下脚本
    
        "scripts": {
          "dev": "webpack --mode development",
          "build": "webpack --mode production"
        }
    
    ![497742670-5c7f21b24c402_articlex][]
 *  现在运行：
    
        npm run dev
    
    生成`dist/main.js` ，其中 `main.js` 没有压缩
    
    > `npm run dev` 表示 **开发模式**
    
    ![271113706-5c7f21b724862_articlex][]
    
        npm run build
    
    此时的`main.js` 被压缩 ，这便是**生产模式**
    
    ![1764567264-5c7f21af5fde9_articlex][]

*  接下来看看打包的js文件是否能够使用
    
     *  创建`index.html` 引入打包好的`main.js`
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <script src="./main.js" charset="utf-8"></script>
        </head>
        <body>
        
        </body>
        </html>

![4126791927-5c7f21afa01a7_articlex][]

*  打开浏览器调试
    
    ![3160138458-5c7f21afbc175_articlex][]

**输出结果表示打包成功，大功告成 ！！！**

【参考文献】 [https://www.valentinog.com/bl...][https_www.valentinog.com_bl...]

[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[3077424659-5c7f21b1b7569_articlex]: /images/20220307/ce5cd9ebd07d4a5a921064d7ce350702.png
[3421328062-5c7f21b5aa6ca_articlex]: /images/20220307/68ccd44e0e7c4f55b6dd6a52b7c29c1b.png
[4264293866-5c7f21bad9b4b_articlex]: /images/20220307/b79a17ebb4714b1d98f60104d4c446f6.png
[3819642765-5c7f21b065e51_articlex]: /images/20220307/392d58d58fe74ffc921959d2236f5ba0.png
[497742670-5c7f21b24c402_articlex]: /images/20220307/68dd031fa8b243f6bcc47322284a79fa.png
[271113706-5c7f21b724862_articlex]: /images/20220307/34ef4545b80e4fb2a2b64af1adc2307e.png
[1764567264-5c7f21af5fde9_articlex]: /images/20220307/853b4d91bd0f4c87b4f9f6581eb13487.png
[4126791927-5c7f21afa01a7_articlex]: /images/20220307/82a31b779b6940798fba00feee269ab8.png
[3160138458-5c7f21afbc175_articlex]: /images/20220307/f03f136e93b54aa5ba6dc731f9ed53ef.png
[https_www.valentinog.com_bl...]: https://www.valentinog.com/blog/webpack-tutorial/