记录 webpack 安装和配置的过程,以及即将遇到的各种坑. :)
环境:win10,webpack@3.6.0
node -v
和 npm -v
分别查看版本信息,一般这里没啥问题。npm install webpack@3.6.0 -g
进行全局安装。webpack -v
查看版本信息,没毛病之前急着搭建博客,所以 Nodejs 安装好后就没管了,今天 webpack -v
命令死活用不了(提示“webpack 不是内部命令”),才发现是因为当时忘记配置环境变量了。
分两步:
(1) 修改全局安装位置
默认情况下,Nodejs 会给系统环境创建两个环境变量:
第一个变量指定了全局安装的东西默认存放的位置,因为我实在不想放在 C 盘,于是得改一下这个默认配置,具体做法:
npm config set prefix "D:\Nodejs\node_global"
npm config set cache "D:\Nodejs\node_cache"
之后可以用 npm root -g
查看一下
这之后再次安装 webpack,不出意外它就会出现在 Nodejs/node_global 文件夹下了。不过我们还是查看不了版本,因为环境变量还没修改。
(2)修改环境变量
我的电脑——右键属性——高级系统设置——高级———环境变量:
PATH
为 D:\Node.js\node_global
NODE_PATH
,设置值为 D:\Node.js\node_global
PS:第二个貌似也可以设置为 D:\Node.js\node_global\node_modules
之后重启 cmd (一定要重启,不然是不生效的),再次 webpack -v
,这次就可以正常使用了。
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 的运行方式
那么,现在项目结构看起来大概如下:
先简单配置一下 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
执行打包。