最新更新时间：2018年8月20日16:57:18
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容：webpack
1 相关
1.1 常见英文缩写
| name | meaning |
|---|---|
| dist | 目录名，distribution 发布版，经过打包、压缩、混淆后的代码 |
| build | 目录名，存放与编译打包相关的配置文件 |
| env | enviroment，环境 |
| prod | production，生产环境 |
| dev | devolopment，开发环境 |
| conf | configuration，配置 |
| ext | extensions，扩展 |
| alias | 别名 |
| DevTool | 开发工具 |
1.2 安装包的信息
| name | version | npm | github | official website |
|---|---|---|---|---|
| webpack | 4.16.5 | click | click | click |
| webpack-dev-server | 3.1.5 | click | click | |
| UglifyJS 3 | 3.4.7 | click | click | 中文文档 |
1.3 官方文档
2 webpack
2.1 基本配置
module.exports = {
entry: './src/app',
output:{
filename:'./dist/app.js'
}
}
2.2 常用命令介绍
这里只罗列常用的基本命令，关于不常用的特殊命令，可参考官网
- $ webpack
在当前目录中找webpack的配置文件webpack.config.js或webpackfile.js,并且执行这个配置文件的内容。
等价于 $ webpack webpack.config.js
配置文件的命名规范，一般带上环境，如webpack.base|dev|prod.conf.js。分别表示基本环境、开发环境和生产环境。
- $ webpack --config ./build/webpack.dev.conf.js
–config 表示指定配置文件路径为./build/webpack.dev.conf.js
在当前目录中查找指定路径的文件./build/webpack.dev.conf.js，并且执行这个配置文件的内容。
-
$ webpack --help
-
$ webpack -h
查看帮助信息
-
$ webpack --version
-
$ webpack -v
查看版本号
- $ webpack -p
压缩混淆脚本
- $ webpack -d
生成map映射文件，在最终的打包文件中，这样会导致bundle包非常大，生产环境禁止这样操作，建议使用{devtool: “source-map”}
2.3 sourcemap
webpack生成的打包文件，在浏览器中不便调试，因此需要加入sourcemap，方便断点调试
devtool 此选项控制是否生成，以及如何生成 source map。
module.exports = {
//devtool: "source-map",.map文件和项目包分开，控制台中源文件和项目包在一个目录。源文件和映射文件分开，映射信息全 ，不会造成打包文件过大。
//devtool: "eval-source-map",.map文件融入项目包，控制台中源文件和项目包在不同目录。
}
3 webpack插件
3.1 webpack-dev-server
Use webpack with a development server that provides live reloading. This should be used for development only.
It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.
常用命令介绍
- $ webpack-dev-server --config ./build/webpack.dev.conf.js",
在当前目录中查找指定路径的文件./build/webpack.dev.conf.js，并且执行这个配置文件的内容。
3.2 HtmlWebpackPlugin
对打包的文件名生成hash值，每次源文件修改，打包后的名字就不一样
js注入，打包后的js文件会自动注入到html文件的body结尾部分(默认，也可以注入到head部分)
css文件注入,假如你使用ExtractTextPlugin插件(这个插件也是必须要了解的)将css文件是单独剥离出来，不放在html中的style标签内，它会自动将css链接注入到link标签中
3.3 Uglifyjs
uglifyjs 用来压缩混淆JS代码；代码发布生产环境版本(正式版本)时，必须走压缩混淆流程；一般uglifyjs集成在webpack中，但自己可以尝试一下对一个js文件的压缩混淆处理；
压缩混淆后的代码，可以参考jquery.min.js，特征如下：第一，代码没有空格；第二，代码多了很多a、b、c等变量；分别称作压缩和混淆；
- uglifyjs只能压缩js文件(且只支持ECMAScript 5: ES5).
npm install uglify-js -g;//全局安装uglify-js包
npm uglify-js -v;//查看是否安装成功
uglifyjs test.js -o test.min.js;
uglifyjs test.js --output test.min.js;
//--前面是压缩配置，后面是输入的文件；没有指定output，则在终端输出结果
uglifyjs --compress --mangle -- test.js;
uglifyjs --compress --mangle -- test.js --output test.min.js;
uglifyjs -c -m -- test.js -o test.min.js;
uglifyjs Command Line(cli)参数一览表
--source-map 指定输出的文件产生一份sourcemap
--source-map-root 此路径中的源码编译后会产生sourcemap
--source-map-url 放在//#sourceMappingURL的sourcemap路径. 默认是
--source-map传入的值.
--source-map-include-sources 如果你要在sourcemap中加上源文件的内容作为sourcesContent属性，
就传这个参数吧。
--source-map-inline 把sourcemap以base64格式附在输出文件结尾
--in-source-map 输入sourcemap。假如的你要编译的JS是另外的源码编译出来的。
假如该sourcemap包含在js内，请指定"inline"。
--screw-ie8 是否要支持IE6/7/8。UglifyJS默认不兼容IE。
--support-ie8 是否要支持IE6/7/8，等同于在`compress`, `mangle` 和
`output`选项中都设置`screw_ie8: false`
--expr 编译一个表达式，而不是编译一段代码（编译JSON时用）
-p, --prefix 忽略sourcemap中源码的前缀。例如`-p 3`会干掉文件名前面3层目录
以及保证路径是相对路径。你也可以指定`-p relative`,让UglifyJS
自己计算输出文件、sourcemap与源码之间的相对路径。
-o, --output 输出文件，默认标准输出(STDOUT)
-b, --beautify 美化输出/指定输出 选项
-m, --mangle Mangle的名字，或传入一个mangler选项.
-r, --reserved mangle的例外，不包含在mangling的名字
-c, --compress 是否启用压缩功能（true/fasle），或者传一个压缩选项对象, 例如
`-c 'if_return=false,pure_funcs=["Math.pow","console.log"]'`，
`-c`不带参数的话就是用默认的压缩设置。
-d, --define 全局定义
-e, --enclose 所有代码嵌入到一个大方法中，传入参数为配置项
--comments 保留版权注释。默认保留Google Closure那样的，保留JSDoc-style、
包含"@license" 或"@preserve"字样的注释。你也可以传下面的参数:
- "all" 保留所有注释
- 正则（如`/foo/`、`/^!/`）保留匹配到的。要注意，如果启用了压
缩，因为会移除不可达代码以及压缩连续声明，因此不是*所有*注释都能
保留下来。
--preamble 在输出文件开头插入的前言。你可以插入一段注释，例如版权信息。
这些不会被编译，但sourcemap会改成当前的样子。
--stats 在STDERR中显示操作运行时间。
--acorn 用 Acorn解析。
--spidermonkey 假如输入文件是 SpiderMonkey AST 格式(像JSON).
--self 把UglifyJS2本身也构建成一个依赖包
(等同于`--wrap=UglifyJS --export-all`)
--wrap 所有代码嵌入到一个大函数中,让"exports"和"global"变量有效，
你需要传入一个参数指定模块被浏览器引入时的名字。
--export-all 只当`--wrap`时有效,告诉UglifyJS自动把代码暴露到全局。
--lint 显示一些可视警告
-v, --verbose Verbose
-V, --version 打印版本号.
--noerr 不要为-c,-b 或 -m选项中出现未知选项而抛出错误。
--bare-returns 允许返回函数的外部。当最小化CommonJs模块和Userscripts时，
可能匿名函数会被.user.js引擎调用立即执行（IIFE）
--keep-fnames 不要混淆、干掉的函数的名字。当代码依赖Function.prototype.name时有用。
--reserved-file 要保留的文件的名字
--reserve-domprops 保留（绝大部分？）DOM的属性，当--mangle-props
--mangle-props 混淆属性，默认是`0`.设置为`true`或`1`则会混淆所有属性名。
设为`unquoted`或 `2`则只混淆不在引号内的属性。`2`时也会让
`keep_quoted_props` 美化选项生效，保留括号内的属性；让压缩选项
的`properties`失效，阻止覆写带点号（.）的属性。你可以通过在命令
中明确设置来覆写它们。
--mangle-regex 混淆正则，只混淆匹配到的属性名。
--name-cache 用来保存混淆map的文件
--pure-funcs 假如返回值没被调用则可以安全移除的函数。
例如`--pure-funcs Math.floor console.info`(需要设置 `--compress`)
参考源
一个男人关于webpack的系列文章
其他
感谢阅读，欢迎评论^-^
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
