webpack 是目前流行的打包工具,如何安装它呢?
首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统中安装一次就可以了。
我们希望能够在系统的任何文件夹中使用 Webpack,使用的方式是通过 Webpack 命令来完成的,这需要我们全局安装 Webpack。这也只需要安装一次,以后每个项目就不需要重新全局安装了。
- $ npm install webpack - g
成功安装之后,你应该能够在任何目录中执行 webpack 命令,如果你还没有项目的配置文件的话,应该会看到当前的 Webpack 版本和一个命令的帮助列表。
- > webpack webpack 1.12.12 Usage: https: //webpack.github.io/docs/cli.html
- Options: --help,
- -h,
- -?--config--context--entry--module - bind--module - bind - post--module - bind - pre--output - path--output - file--output - chunk - file--output - named - chunk - file--output - source - map - file--output - public - path--output - jsonp -
- function--output - pathinfo--output - library--output - library - target--records - input - path--records - output - path--records - path--define--target--cache[
- default:
- true]--watch,
- -w--watch which closes when stdin ends--watch - aggregate - timeout--watch - poll--hot--debug--devtool--progress--resolve - alias--resolve - loader - alias--optimize - max - chunks--optimize - min - chunk - size--optimize - minimize--optimize - occurence - order--optimize - dedupe--prefetch--provide--labeled - modules--plugin--bail--profile - d shortcut
- for--debug--devtool sourcemap--output - pathinfo - p shortcut
- for--optimize - minimize--json,
- -j--colors,
- -c--sort - modules - by--sort - chunks - by--sort - assets - by--hide - modules--display - exclude--display - modules--display - chunks--display - error - details--display - origins--display - cached--display - cached - assets--display - reasons,
- --verbose,
- -v Output filename not configured.PS C: \study\webpack\w1 >
注意,最后还提示你,当前没有找到 webpack 配置文件。
最好在你的项目中也包含一份独立的 Webpack,这样你更方便管理你的项目。为什么又是全局安装,又是局部安装呢?可以。
首先,你需要已经创建了 NPM 的项目文件,如果没有的话,使用 init 命令创建它。
- npm init
你需要回答一系列问题。最终你会得到一个名为 package.json 的 NPM 项目文件,如果你愿意的话,手工创建它也不错。甚至你可以直接复制一个过来。
一个新创建的 package.json 内容应该如下所示。
- {
- "name": "w1",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "dependencies": {},
- "devDependencies": {},
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "keywords": [],
- "author": "",
- "license": "ISC"
- }
现在,可以在项目中安装 Webpack 了,直接使用 NPM 的 install 命令。
- npm install webpack--save - dev
--save-dev 的意思是说 webpack 是一个开发工具,我们需要将这一点保存到 package.Json 文件中。
install 命令可以简化为单个字符 i,注意是小写的 i。
--save-dev 还可以简化为大写的 S,写成 -S,你可以在这里。
- npm i webpack--S
你应该看到一个长长的输出,这是由于 Webpack 是一个很复杂的工具。它依赖很多的其它工具。
- > npm install webpack--save - dev w1@1.0.0 w1`--webpack@1.13.2 + --acorn@3.3.0 + --async@1.5.2 + --clone@1.0.2 + --enhanced - resolve@0.9.1 | +--graceful - fs@4.1.9 | `--memory - fs@0.2.0 + --interpret@0.6.6 + --loader - utils@0.2.16 | +--big.js@3.1.3 | +--emojis - list@2.1.0 | +--json5@0.5.0 | `--object - assign@4.1.0 + --memory - fs@0.3.0 | +--errno@0.1.4 | |`--prr@0.0.0 | `--readable - stream@2.1.5 | +--buffer - shims@1.0.0 | +--core - util - is@1.0.2 | +--inherits@2.0.3 | +--isarray@1.0.0 | +--process - nextick - args@1.0.7 | `--util - deprecate@1.0.2 + --mkdirp@0.5.1 | `--minimist@0.0.8 + --node - libs - browser@0.6.0 | +--assert@1.4.1 | +--browserify - zlib@0.1.4 | |`--pako@0.2.9 | +--buffer@4.9.1 | |+--base64 - js@1.2.0 | |`--ieee754@1.1.8 | +--console - browserify@1.1.0 | |`--date - now@0.1.4 | +--constants - browserify@0.0.1 | +--crypto - browserify@3.2.8 | |+--pbkdf2 - compat@2.0.1 | |+--ripemd160@0.2.0 | |`--sha.js@2.2.6 | +--domain - browser@1.1.7 | +--events@1.1.1 | +--http - browserify@1.7.0 | |`--Base64@0.2.1 | +--https - browserify@0.0.0 | +--os - browserify@0.1.2 | +--path - browserify@0.0.0 | +--process@0.11.9 | +--punycode@1.4.1 | +--querystring - es3@0.2.1 | +--readable - stream@1.1.14 | |`--isarray@0.0.1 | +--stream - browserify@1.0.0 | |`--readable - stream@1.1.14 | |`--isarray@0.0.1 | +--string_decoder@0.10.31 | +--timers - browserify@1.4.2 | +--tty - browserify@0.0.0 | +--url@0.10.3 | |+--punycode@1.3.2 | |`--querystring@0.2.0 | +--util@0.10.3 | |`--inherits@2.0.1 | `--vm - browserify@0.0.4 | `--indexof@0.0.1 + --optimist@0.6.1 | `--wordwrap@0.0.3 + --supports - color@3.1.2 | `--has - flag@1.0.0 + --tapable@0.1.10 + --uglify - js@2.6.4 | +--async@0.2.10 | +--source - map@0.5.6 | +--uglify - to - browserify@1.0.2 | `--yargs@3.10.0 | +--camelcase@1.2.1 | +--cliui@2.1.0 | |+--center - align@0.1.3 | ||+--align - text@0.1.4 | |||+--longest@1.0.1 | |||`--repeat - string@1.5.4 | ||`--lazy - cache@1.0.4 | |+--right - align@0.1.3 | |`--wordwrap@0.0.2 | +--decamelize@1.2.0 | `--window - size@0.1.0 + --watchpack@0.2.9 | +--async@0.9.2 | `--chokidar@1.6.1 | +--anymatch@1.3.0 | |+--arrify@1.0.1 | |`--micromatch@2.3.11 | |+--arr - diff@2.0.0 | ||`--arr - flatten@1.0.1 | |+--array - unique@0.2.1 | |+--braces@1.8.5 | ||+--expand - range@1.8.2 | |||`--fill - range@2.2.3 | |||+--is - number@2.1.0 | |||+--isobject@2.1.0 | |||`--randomatic@1.1.5 | ||+--preserve@0.2.0 | ||`--repeat - element@1.1.2 | |+--expand - brackets@0.1.5 | ||`--is - posix - bracket@0.1.1 | |+--extglob@0.3.2 | |+--filename - regex@2.0.0 | |+--kind - of@3.0.4 | ||`--is - buffer@1.1.4 | |+--normalize - path@2.0.1 | |+--object.omit@2.0.0 | ||+--
- for - own@0.1.4 | |||`--
- for - in@0.1.6 | ||`--is - extendable@0.1.1 | |+--parse - glob@3.0.4 | ||+--glob - base@0.3.0 | ||`--is - dotfile@1.0.2 | |`--regex - cache@0.4.3 | |+--is - equal - shallow@0.1.3 | |`--is - primitive@2.0.0 | +--async - each@1.0.1 | +--glob - parent@2.0.0 | +--is - binary - path@1.0.1 | |`--binary - extensions@1.7.0 | +--is - glob@2.0.1 | |`--is - extglob@1.0.0 | +--path - is - absolute@1.0.1 | `--readdirp@2.1.0 | +--minimatch@3.0.3 | |`--brace - expansion@1.1.6 | |+--balanced - match@0.4.2 | |`--concat - map@0.0.1 | `--set - immediate - shim@1.0.1`--webpack - core@0.6.8 + --source - list - map@0.1.6`--source - map@0.4.4`--amdefine@1.0.0 npm WARN optional Skipping failed optional dependency / chokidar / fsevents: npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14 npm WARN w1@1.0.0 No description npm WARN w1@1.0.0 No repository field. >
这时候,你再检查一下 package.json 文件,它应该多了三行。
- {
- "name": "w1",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "dependencies": {},
- "devDependencies": {
- "webpack": "^1.13.2"
- },
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "keywords": [],
- "author": "",
- "license": "ISC"
- }
来源: http://www.cnblogs.com/haogj/p/5989124.html