webpack4的安装
2019-06-24 本文已影响0人
最底层的技术渣
前言:
在学习webpack之前建议去学习
node
、npm
、【sass
、less
、scss
】系列、es6
等,下面的一些npm命令若不太明白可以查看npm i -D和-s及-g以及--save的那些事
请确保安装了 Node.js
的最新版本。而且已经在您的项目根目录下已经初始化好了最基本的package.json
文件,如果没有,请先按照下列步骤操作
mkdir webpack4 #创建一个webpack4为名称的空文件夹
cd webpack4 #进入webpack4 文件夹
F:\git\webpack4>node -v #查看node版本,确定node是否安装
v8.10.0
F:\git\webpack4>npm -v #查看npm版本,确定npm是否安装
5.6.0
F:\git\webpack4>npm init -y #初始化package.json文件
Wrote to F:\git\webpack4\package.json:
{
"name": "webpack4",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
本地安装 webpack (开发环境需要的依赖)
npm install --save-dev webpack #或者 npm i -D webpack
# 如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack-cli
F:\git\webpack4>npm install --save-dev webpack
npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, lstat 'F:\git\webpack4\node_modules\fsevents\node_modules'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack@4.35.0
added 324 packages in 69.024s
F:\git\webpack4>npm install --save-dev webpack-cli
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack-cli@3.3.5
added 63 packages in 38.342s
image.png
安装完成后,可以添加npm
的script
脚本
// package.json
"scripts": {
"start": "webpack --config webpack.config.js"
}
全局安装 webpack(不推荐)
将使 webpack 在全局环境下可用:
npm install --global webpack
注意:不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。