webpack.config.js配置文件

• entry: js的入口文件
• externals: 外部依赖的声明
• output:目标文件
• resolve:配置别名
• module:各种文件,各种loader
• plugins:插件

2 webpack loaders(最重要部分)

html:html-webpack-plugin / html-loader
js:babel-loader + babel-preset-es2015
css:style-loader + css-loader
image+font:url-loader

3 常用命令

• webpack
  以不压缩的形式打包
• webpack -p
  线上发布时的打包,对所有文件进行最小化压缩
• webpack –watch(有了4后,此命令几乎无用了)
  监听文件的改变,自动编译
• webpack –config webpack.config.js

4 webpack-dev-server

作用:前端开发服务器
特色:可以在文件改变时,自动刷新浏览器
安装:npm install webpack-dev-server –save-dev
配置:webpack-dev-server/client?http://localhost:8088
使用:webpack-dev-server –port 8088 –inline

5 安装webpack

在git bash中执行(全局webpack安装)

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0) $ npm install webpack -gnpm WARN optional dep failed, continuing fsevents@1.1.2 > uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\Shusheng Shi\mmall\doc\mmal l-fe\node_modules\webpack\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js
                  webpack@3.6.0 node_modules\webpack
├── tapable@0.2.8
├── loader-runner@2.3.0
├── interpret@1.0.4
├── json-loader@0.5.7
├── json5@0.5.1
├── acorn@5.1.2
├── supports-color@4.4.0 (has-flag@2.0.0)
├── source-map@0.5.7
├── ajv-keywords@2.1.0
├── loader-utils@1.1.0 (big.js@3.2.0, emojis-list@2.1.0)
├── webpack-sources@1.0.1 (source-list-map@2.0.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── enhanced-resolve@3.4.1 (object-assign@4.1.1, graceful-fs@4.1.11)
├── acorn-dynamic-import@2.0.2 (acorn@4.0.13)
├── memory-fs@0.4.1 (errno@0.1.4, readable-stream@2.3.3)
├── yargs@8.0.2 (get-caller-file@1.0.2, decamelize@1.2.0, camelcase@4.1.0, y18n@                                                                       3.2.1, set-blocking@2.0.0, which-module@2.0.0, yargs-parser@7.0.0, require-main-                                                                       filename@1.0.1, require-directory@2.1.1, string-width@2.1.1, cliui@3.2.0, os-loc                                                                       ale@2.1.0, read-pkg-up@2.0.0)
├── ajv@5.2.3 (co@4.6.0, json-schema-traverse@0.3.1, fast-deep-equal@1.0.0, json                                                                       -stable-stringify@1.0.1)
├── uglifyjs-webpack-plugin@0.4.6 (uglify-js@2.8.29)
├── watchpack@1.4.0 (graceful-fs@4.1.11, chokidar@1.7.0)
├── node-libs-browser@2.0.0 (https-browserify@0.0.1, tty-browserify@0.0.0, path-                                                                       browserify@0.0.0, punycode@1.4.1, string_decoder@0.10.31, constants-browserify@1                                                                       .0.0, os-browserify@0.2.1, process@0.11.10, assert@1.4.1, domain-browser@1.1.7,                                                                        querystring-es3@0.2.1, stream-browserify@2.0.1, events@1.1.1, timers-browserify@                                                                       2.0.4, vm-browserify@0.0.4, util@0.10.3, console-browserify@1.1.0, url@0.11.0, r                                                                       eadable-stream@2.3.3, stream-http@2.7.2, buffer@4.9.1, browserify-zlib@0.1.4, cr                                                                       ypto-browserify@3.11.1)
├── escope@3.6.0 (estraverse@4.2.0, esrecurse@4.2.0, es6-weak-map@2.0.2, es6-map                                                                       @0.1.5)
└── async@2.5.0 (lodash@4.17.4)

项目目录安装webapck(本地webpack安装,防止部署环境和本地依赖包版本不一致)

$ npm install webpack@1.15.0 --save-dev                                                                                          npm WARN optional dep failed, continuing fsevent                                                                                 s@1.1.2
webpack@1.15.0 node_modules\webpack
├── interpret@0.6.6
├── tapable@0.1.10
├── clone@1.0.2
├── async@1.5.2
├── supports-color@3.2.3 (has-flag@1.0.0)
├── loader-utils@0.2.17 (object-assign@4.1.1, bi                                                                                 g.js@3.2.0, emojis-list@2.1.0, json5@0.5.1)
├── enhanced-resolve@0.9.1 (graceful-fs@4.1.11,                                                                                  memory-fs@0.2.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── acorn@3.3.0
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0                                                                                 .10)
├── memory-fs@0.3.0 (errno@0.1.4, readable-strea                                                                                 m@2.3.3)
├── webpack-core@0.6.9 (source-list-map@0.1.8, s                                                                                 ource-map@0.4.4)
├── uglify-js@2.7.5 (async@0.2.10, uglify-to-bro                                                                                 wserify@1.0.2, source-map@0.5.7, yargs@3.10.0)
├── node-libs-browser@0.7.0 (https-browserify@0.                                                                                 0.1, tty-browserify@0.0.0, path-browserify@0.0.0                                                                                 , punycode@1.4.1, string_decoder@0.10.31, consta                                                                                 nts-browserify@1.0.0, os-browserify@0.2.1, proce                                                                                 ss@0.11.10, assert@1.4.1, domain-browser@1.1.7,                                                                                  querystring-es3@0.2.1, events@1.1.1, stream-brow                                                                                 serify@2.0.1, vm-browserify@0.0.4, timers-browse                                                                                 rify@2.0.4, util@0.10.3, console-browserify@1.1.                                                                                 0, url@0.11.0, readable-stream@2.3.3, stream-htt                                                                                 p@2.7.2, browserify-zlib@0.1.4, buffer@4.9.1, cr                                                                                 ypto-browserify@3.3.0)
└── watchpack@0.2.9 (graceful-fs@4.1.11, async@0                                                                                 .9.2, chokidar@1.7.0)

看下版本

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall                                                                                 -fe (mmall_v1.0)
$ webpack -v
webpack 1.15.0
Usage: https://webpack.github.io/docs/cli.html

看下文件,新增了node_modules/

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe
$ ls
README.md  node_modules/  package.json  src/

看出webpack就安装于此

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe          (mmall_v1.0)
$ cd node_modules/

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe         /node_modules (mmall_v1.0)
$ ls
webpack/