本文共 6845 字，大约阅读时间需要 22 分钟。

webpack.config.js配置文件

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

2 webpack loaders(最重要部分)

html:html-webpack-plugin / html-loader

3 常用命令

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

4 webpack-dev-server

作用:前端开发服务器

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.2webpack@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 -vwebpack 1.15.0Usage: https://webpack.github.io/docs/cli.html

看下文件,新增了node_modules/

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe$ lsREADME.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)$ lswebpack/

转载地址：https://javaedge.blog.csdn.net/article/details/78149360 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！