Webpack第一天

Posted 2021-04-29 coding个人笔记

Webpack是什么？我觉得我没必要再介绍了，相信开发前端的都知道现在webpack在前端所占的地位。Webpack就是一个模块打包工具，帮我们转换代码、压缩文件、代码分割、代码教研、自动刷新等等等等。前端三大框架也都是基于webpack。

 

Webpack现在已经升级到了4+，推出了脚手架，本人也算是从头开始学习，所以我不会也不懂很详细的说一些什么，只是记录自己用webpack搭建一个简易项目的过程。

 

首先，我把webpack当做项目来做，所以我会先创建一个项目的结构：

 

src是项目的主要内容，static是不打包的内容，index就不用说了。

 

进入项目目录，接着下载webpack，推荐的是局部安装，因为怕不同项目使用的版本不一样，全局安装会出现问题。下载之前先初始化package.json，记录我们安装的各种包和插件等。

npm inint -y(-y少了询问的阶段)；

npm install webpack webpack-cli -D(-D是—save-dev的简写，开发时依赖)

 

安装成功后可以在package.json看见安装了的版本号：

"devDependencies": {
  "webpack": "^4.17.1",
  "webpack-cli": "^3.1.0"
}

 

这边我不去打包单个的文件，4+的打包都有了默认的，所以这边直接新建配置文件，叫webpack,conf.js，默认是这个，想改也是可以的。这个配置文件按照node的commonJS规范来书写：

let path = require('path');//node的模块

module.exports = {
    entry: './src/main.js',//入口
    output: {//出口
        filename: "main.js",
        path: path.resolve('./dist')//绝对路径
    },
    devServer: {},//开发服务
    module: {},//模块
    plugis: [],//插件
    mode: 'development',//4+新增的模式
    resolve: {}//配置解析
}

 

因为npm新出了一个npx的命令，号称0配置运行的命令。直接运行的是node_modules对应的webpack.cmd，如果没有安装还能帮你安装webpack。这边使用npx是因为我们还没配置运行命令。

 

npx webpack：执行之后就打包出了dist文件夹。这边要注意配置文件的单词。

（完）

Coding 个人笔记