专栏首页前端之旅Webpack(一):安装和基础配置

Webpack(一):安装和基础配置

记录 webpack 安装和配置的过程,以及即将遇到的各种坑. :)

环境:win10,webpack@3.6.0

1. webpack 安装

1.1 安装过程

  1. 在安装 webpack 之前,需要先安装 Nodejs(这个过程会自动帮你安装好 npm)。路径的话默认是 C 盘,因为强迫症,我把它安装在了 D 盘。
  2. 安装好 Nodejs 后,在 cmd 命令行里可以通过 node -vnpm -v 分别查看版本信息,一般这里没啥问题。
  3. 之后一定不要忘记配置 Nodejs 的环境变量(具体步骤看1.2)
  4. 接着就是安装 webpack 了,因为练手的项目用的是 4.x 之前的版本,我这里用 npm install webpack@3.6.0 -g 进行全局安装。
  5. webpack -v 查看版本信息,没毛病

1.2 Nodejs 环境变量配置

之前急着搭建博客,所以 Nodejs 安装好后就没管了,今天 webpack -v 命令死活用不了(提示“webpack 不是内部命令”),才发现是因为当时忘记配置环境变量了。

分两步:

(1) 修改全局安装位置

默认情况下,Nodejs 会给系统环境创建两个环境变量:

  • 用户变量 PATH: C:\Users\Admin\AppData\Roaming\npm
  • 系统变量 PATH:D:\Nodejs

第一个变量指定了全局安装的东西默认存放的位置,因为我实在不想放在 C 盘,于是得改一下这个默认配置,具体做法:

  • 首先在 Nodejs 文件夹中新建 node_global 和 node_cache 文件夹,分别用于存放全局安装包和临时缓存位置;
  • 接着 cmd 里设置全局安装路径和全局缓存路径(也就是刚才那两个):
npm config set prefix "D:\Nodejs\node_global"
npm config set cache "D:\Nodejs\node_cache"

之后可以用 npm root -g 查看一下

这之后再次安装 webpack,不出意外它就会出现在 Nodejs/node_global 文件夹下了。不过我们还是查看不了版本,因为环境变量还没修改。

(2)修改环境变量

我的电脑——右键属性——高级系统设置——高级———环境变量:

  • 用户变量:修改 PATHD:\Node.js\node_global
  • 系统变量:新增 NODE_PATH ,设置值为 D:\Node.js\node_global

PS:第二个貌似也可以设置为 D:\Node.js\node_global\node_modules

之后重启 cmd (一定要重启,不然是不生效的),再次 webpack -v,这次就可以正常使用了。

2. 基本结构搭建

1.练手的话先新建一个项目,然后 cd 进去:

mkdir webpack-learning
cd webpack-learning

以后就是在这个文件夹里搞事情了。

2.创建 index.html 文件和 src 文件夹,后者存放打包前的文件

3.通过 npm init 生成 package.json 文件,这个文件用来描述项目信息以及依赖配置等。这里基本一路回车就好。

4.通过 npm install webpack@3.6.0 --save -dev本地安装 webpack。本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动、复制、打包等 。

5.手动创建 webpack.config.js 文件,这个文件用来配置 webpack 的运行方式

那么,现在项目结构看起来大概如下:

3. 配置 webpack.config.js 和 package.json

先简单配置一下 webpack.config.js:

const path = require('path');
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

这里定义了入口和出口。 入口(entry) 指示 webpack 应该使用哪个模块文件来作为构建内部依赖的开始,进入入口起点后,webpack 会找出有哪些模块和库是入口 js 依赖的; 出口(output) 是告诉 webpack 在什么地方输出它所创建的 bundles,以及如何命名这些打包文件。

我们新建几个文件来简单测试下。首先是module.js :

var num = 1;
function add(){
    num++;
}
export {num,add}

main.js 作为入口文件:

import {num,add}
console.log(num)
add()
console.log(num)

main.js 进行打包:

$ webpack ./src/main.js ./dist/bundle.js

会发现项目文件夹下多出来一个dist文件夹,里面有一个打包生成的 bundle.js文件:

之后在 index.html 中直接引用该文件:

<script src="./dist/bundle.js"></script>

浏览器跑一下,没毛病。

不过,之前的打包命令太麻烦了,所以我们配置一下 package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

之后可以直接通过 npm run build 执行打包。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack(三):使用 plugin 以及本地服务器搭建

    webpack 自带 BannerPlugin,我们只需要在 webpack.config.js 中配置即可:

    Chor
  • 深入浅出理解闭包

    本篇博客转载自@王福朋 王老师的系列文章。系列文章共计18篇,主要涉及js中的两个重难点—-原型和闭包。由于原型部分我在另外一篇博客有介绍,所以这里只集合了他关...

    Chor
  • Vue+Koa2 前后端分离项目线上部署

    昨天尝试部署一个 Vue+Koa2 的前后端分离项目,没想到因为前端项目部署的问题,卡了一整天,今天才终于找到了问题所在,成功解决。这篇文章主要谈谈:

    Chor
  • Webpack2入门

    kongxx
  • Webpack快速上手指南

    Webpack用于编译JavaScript模块。安装以后,可以通过CLI或API使用它。如果你对webpack还有点陌生,可以先看看它的核心概念以及一些比较,了...

    疯狂的技术宅
  • 零基础如何建立“前端技术体系”? --本周日晚“先行者课程”,给你示范

    昨天的《WEB前端新人,怎么样构建自己的“前端技术体系”?用以在面试中打败其它竞争者》大概的写了下新人如何建立属于自己的前端技术体系,比较简单,正好今晚的先行者...

    web前端教室
  • 前端工程化(二)---webpack配置

    用户2193479
  • webpack(4.8.3)总结

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade

扫码关注云+社区

领取腾讯云代金券