Webpack安装教程

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

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

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

例 window系统的

 

下载安装好后

 

打开命令行执行命令

node -v     // 查看node的版本

npm -v     //查看npm的版本

 

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

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

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

全局安装:

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

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

-g -----全局安装

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

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

 

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

 

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

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

npm install webpack webpack-cli --save-dev

安装后你会发现你项目下多了node_moudle文件 package_lock.json文件；说明你成功安装好了

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

npm init

回车后你会发现

不用管一路回车直到

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

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

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

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

例

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

例：  

index.js

document.write("Hello webpack");

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

 

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

运行结果

一切完好没问题，目前都是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的朋友有所帮助；有不对的地方问题可指出