- entry: js的入口文件
- externals: 外部依赖的声明
- output:目标文件
- resolve:配置别名
- module:各种文件,各种loader
- plugins:插件
html:html-webpack-plugin / html-loader
js:babel-loader + babel-preset-es2015
css:style-loader + css-loader
image+font:url-loader
- webpack
以不压缩的形式打包 - webpack -p
线上发布时的打包,对所有文件进行最小化压缩 - webpack –watch(有了4后,此命令几乎无用了)
监听文件的改变,自动编译 - webpack –config webpack.config.js
作用:前端开发服务器
特色:可以在文件改变时,自动刷新浏览器
安装:npm install webpack-dev-server –save-dev
配置:webpack-dev-server/client?http://localhost:8088
使用:webpack-dev-server –port 8088 –inline
在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/