Webpack安装教程

ゝ一纸荒年。 2022-05-17 10:04 943阅读 0赞

本章为大家分享webpack4.0后的安装教程，自己刚接触时，网上大部分都是以前的安装教程，在过程真遇到些坑，为了大家不必浪费更多的时间，这里将为大家详细介绍

webpack是什么，它是一个根据模块依赖关系进行静态分析的工具，简单来说就是打包工具，在当前的前端打包工具的使用时是趋势的发展；下面进入正题

在安装webpack前，你必须为本机安装 node.js ；这个你直接去官网选择相应的系统直接下载一路下一步安装好，[node下载][node]

例 window系统的

![70][]

下载安装好后

打开命令行执行命令

node -v     // 查看node的版本

npm -v     //查看npm的版本

都正常显示版本号，那就安转成功了可以进行webpack的安装了。一般这个不会出错，若出错检查下你安装的路径位置，实在不行重新安装吧，

没问题就进入webpack的安装，webpack的安装有全局安装与 仅该项目安装，官方不建议全局安装，网上的教程基本是全局安装，即使你全局安装了，你依旧需要再次为项目安装。全局安装可能会造成项目中的指向的是全局安装的webpack;

由于webpack4后的版本，命令迁移至webpack-cli，因此还需安装webpack-cli

全局安装:

打开命令行（win+R      输入cmd）

![70 1][]

在命令行执行    npm install webpack webpack-cli -g --save-dev

\-g -----全局安装

\--save-dev  ----- 信息写入package.json的devDependencies中

![70 2][]

然后等待时间，下载快慢取决于你的网速

下载好后在命令行执行 webpack -v 查看webpack的版本号，正常显示说明安装好了

为项目安装，找到你该项目的路径位置。在你项目的位置打开命令行；快捷方式 按住 shfit + 鼠标右键   在窗口选择在此处打开命令行，如果你安转了 git 的话 也可打开 Git-Bash here

在命令行执行 同样的只是去除了 -g 这个全局安装

npm install webpack webpack-cli --save-dev

安装后你会发现你项目下多了node\_moudle文件 package\_lock.json文件；说明你成功安装好了

再在命令行初始化项目执行命令

npm init

回车后你会发现

![70 3][]

不用管一路回车直到

![70 4][]

到这里你回到项目例看会看到 package.json文件   一切没问题

这里webpakc的入口默认为 src 下的index.js，出口默认为 ./dist

接下来你可以下项目下新建 文件夹 src 其下面并创建index.js;还有文件夹dist； 你也可通过在命令行执行命令

mkdir src     创建文件夹src      mkdir dist 创建文件夹 dist，再在src下新建一个index.js文件

例

![70 5][]

到这里在你的index.js写你的js代码

例：

index.js

document.write("Hello webpack");

然后在命令行执行 webpack   之后你会发现你的dist文件下多了一个 main.js

![70 6][]

然后在你的 html 中 引入 main.js

![70 7][]

运行结果

![70 8][]

一切完好没问题，目前都是webpack的默认配置

接下来可以自定义webpack的配置，在项目的根目录下创建 webpack.config.js 文件

webpack.config.js

const path = require('path');
    
      module.exports = {
       //入口文件
        entry: './src/index.js',
        //出口哦
        output: {
          //输出的文件名
          filename: 'bundle.js',
          //输出的路径
          path: path.resolve(__dirname, 'dist')
        },
        mode: 'development'
      };

\_\_dirname  ----- 运行时的当前路径

mode ---- 模式prodution（生产模式）与 development （开发）webpack4后需指明

package.json

{
      "name": "webpacktest",
      "version": "1.0.0",
      "description": "",
      "private": true, 
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^1.0.0",
        "file-loader": "^1.1.11",
        "lodash": "^4.17.10",
        "style-loader": "^0.21.0",
        "webpack": "^4.16.3",
        "webpack-cli": "^3.1.0"
      }
    }

加入了 "private": true  ----  设置私有

"build": "webpack "  ---- 配置执行命令

有该配置在命令行执行刷新配置

npx webpack--config webpack.config.js

后执行

npm run build

打包  你会发现dist下面多了个 bundle.js文件  在html中引入bundle.js正常显示 Hello webpack

完成了

webpack自身只能理解js，并打包，如需进行 css 或者图片 xml 等还需下载相应的loder

例：打包css 需安装  style-loader css-loader

在html中引用的是 dist 下的 bundle.js ，这是前端开发的一个趋势：开发的源文件（例子中src/index.js）与 最终部署文件（例子的dist/bundle.js）是区分开的，因为开发环境与用户环境不一致。比如我们在开发中使用了ES6的新特性，在用户端不一定支持，这也是webpack等打包工具的意义， 它能够辅助我们构建出在目标用户浏览器上正常运行的代码

webpack的起步讲到这，需了解详情也可去看官方文档[webpack中文网][webpack]

希望对刚接触webpack的朋友有所帮助；有不对的地方问题可指出

[node]: http://nodejs.cn/download/
[70]: /images/20220517/d249db460e094923825ba57b6949613c.png
[70 1]: /images/20220517/8df5f37fd69e4c77ba2e839930201270.png
[70 2]: /images/20220517/838faa28880b477484b1502198bb7e13.png
[70 3]: /images/20220517/34078e04f5b84b93947fb6bc1fb8349f.png
[70 4]: /images/20220517/369ffcd8e5c344afb7bdaebaef966662.png
[70 5]: /images/20220517/05ecbfa069bf44dd80b23476abba3517.png
[70 6]: /images/20220517/e135c40a59a340d88feb7d64dea23867.png
[70 7]: /images/20220517/a0581f7ea9604153bd86b4c14c1297ad.png
[70 8]: /images/20220517/bee0f5664ecc4512873f56313e3c92d5.png
[webpack]: https://www.webpackjs.com/concepts/