Webpack4.x 版本入门指南

最新推荐文章于 2024-09-27 20:24:17 发布

米斯特_DD

最新推荐文章于 2024-09-27 20:24:17 发布

阅读量4.4k

点赞数 3

本文链接：https://blog.csdn.net/yk75952/article/details/79738315

版权

这是一篇关于Webpack 4.x的入门指南，详细介绍了如何在Windows环境下搭建Webpack，包括Webpack的基本概念、安装步骤、文件夹部署、配置webpack.config.js以及处理Webpack 4.1.1之后版本的CLI变化。文章旨在帮助初学者理解Webpack并解决最新版本带来的新问题。

摘要由CSDN通过智能技术生成

本文是基于一位以前公司的同事zzj所写的 Webpack入门指南这篇文章做构建。本文是基于win环境搭建的webpack，以前的同事写的入门指南是webpack3.0版本，最近想用webpack却发现它已经更新到了4.1.x，于是遇到了几个坑，也为了给想入门webpack的小伙伴提供个方便，重新写一份入门指南。

什么是webpack？

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 SASS 等。

webpack是基于node.js环境的前端自动化打包工具，本文默认你已有一定使用node和npm安装的基础。

##安装

1.1 webpack安装

首先新建一个练习文件夹demo，在文件中打开命令终端，输入下列指令即可安装webpack

//全局安装

npm install -g webpack

//安装到项目文件夹

npm install --save-dev webpack

安装完之后，demo里会多一个node_modules文件夹。

接下来输入

npm init

会自动创建package.json文件。安装的时候一路回车即可，需要修改后面再进入package.json文件编辑。

package.json文件是webpack的骨架，在里面可以看到各个关键节点，设置快捷命令等。

1.2 文件夹部署

安装好上面的东西，我们开始往demo文件夹塞东西，新建dist，src文件夹、webpack.config.js配置文件来模拟开发环境。最终目录如下：

demo                      //webpack的模拟开发文件夹
   | - webpack.config.js  //配置webpack出入口、插件、loader
   | - node_modules
   | - dist               //打包输出文件夹
   | - src            	  //开发资源文件夹
     | - webpack.js     //配置webpack引入资源
     | - index.html     /*   基础html文件
     | - index.js            基础js文件
     | - index.css           基础css文件
     | - index.scss          基础scss文件            
     | - images              基础图片文件夹   */
         | - img1.png
         | - img2.png

1.3 配置webpack.config.js

var path = require('path')
var webpack = require('webpack')
module.exports = {
  // bundle入口
  entry: ['./src/webpack'],
  // bundle输出
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js' //可重命名
  }
}

运行

按上面步骤安装后，运行

webpack

即可打包，我们可以看到dist文件夹中生成了bundle.js，此时还未压缩，大小为3k。

到了这里，我们会看到webpack4.1.1 之后的版本在命令行输入webpack命令语句时并没有如期的生成了bundle.js文件，并且向你丢了个提示：

1 The CLI moved into a separate package:webpack-cli.
2 Please install 'webpack-cli' in addition to webpack itself to use the CLI.
3 ->when using npm: npm install webpack-cli -D
4 ->when using yarn: yarn add webpack-cli -D