webpack学习之路

今天药忘吃喽~ 2022-05-16 07:45 282阅读 0赞

###### *最新更新时间：2018年8月20日16:57:18* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：webpack

#### 1 相关 ####

#### 1.1 常见英文缩写 ####

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>meaning</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>dist</td> 
   <td>目录名，distribution 发布版，经过打包、压缩、混淆后的代码</td> 
  </tr> 
  <tr> 
   <td>build</td> 
   <td>目录名，存放与编译打包相关的配置文件</td> 
  </tr> 
  <tr> 
   <td>env</td> 
   <td>enviroment，环境</td> 
  </tr> 
  <tr> 
   <td>prod</td> 
   <td>production，生产环境</td> 
  </tr> 
  <tr> 
   <td>dev</td> 
   <td>devolopment，开发环境</td> 
  </tr> 
  <tr> 
   <td>conf</td> 
   <td>configuration，配置</td> 
  </tr> 
  <tr> 
   <td>ext</td> 
   <td>extensions，扩展</td> 
  </tr> 
  <tr> 
   <td>alias</td> 
   <td>别名</td> 
  </tr> 
  <tr> 
   <td>DevTool</td> 
   <td>开发工具</td> 
  </tr> 
 </tbody> 
</table>

#### 1.2 安装包的信息 ####

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>version</th> 
   <th>npm</th> 
   <th>github</th> 
   <th>official website</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>webpack</td> 
   <td>4.16.5</td> 
   <td><a href="https://www.npmjs.com/package/webpack" rel="nofollow">click</a></td> 
   <td><a href="https://github.com/webpack/" rel="nofollow">click</a></td> 
   <td><a href="https://webpack.js.org" rel="nofollow">click</a></td> 
  </tr> 
  <tr> 
   <td>webpack-dev-server</td> 
   <td>3.1.5</td> 
   <td><a href="https://www.npmjs.com/package/webpack-dev-server" rel="nofollow">click</a></td> 
   <td><a href="https://github.com/webpack/webpack-dev-server" rel="nofollow">click</a></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>UglifyJS 3</td> 
   <td>3.4.7</td> 
   <td><a href="https://www.npmjs.com/package/uglify-js" rel="nofollow">click</a></td> 
   <td><a href="https://github.com/mishoo/UglifyJS2" rel="nofollow">click</a></td> 
   <td><a href="https://segmentfault.com/a/1190000008995453" rel="nofollow">中文文档</a></td> 
  </tr> 
 </tbody> 
</table>

#### 1.3 官方文档 ####

*  [webpack 英文文档(官方)][webpack]
 *  [webpack 中文文档(@印记中文)][webpack 1]
 *  [印记中文 - 深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档！)][- _ Web]

#### 2 webpack ####

###### 2.1 基本配置 ######

module.exports = { 
        entry: './src/app',
        output:{ 
            filename:'./dist/app.js'
        }
    }

###### 2.2 常用命令介绍 ######

> 这里只罗列常用的基本命令，关于不常用的特殊命令，可参考[官网][Link 1]

*  $ 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文件融入项目包，控制台中源文件和项目包在不同目录。
    }

*  [参考：devtool][devtool]

#### 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的系列文章

*  [webpack从零开始第1课:安装webpack和webpack-dev-server][webpack_1_webpack_webpack-dev-server]
 *  [webpack从零开始第2课: 配置文件][webpack_2_]
 *  [webpack从零开始第3课: 做为node的一个模块来使用][webpack_3_ _node]
 *  [webpack从零开始第4课: 插件篇][webpack_4_]
 *  [webpack从零开始第5课:模块篇][webpack_5]
 *  [webpack从零开始第6课:在Vue开发中使用webpack][webpack_6_Vue_webpack]

> 其他

*  [webpack-contrib][]
 *  [webpack开发环境配置和生产环境配置][webpack 2]
 *  [Webpack 4 教程：从零配置到生产发布（2018）][Webpack 4 _2018]
 *  [印记中文 - 深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档！][- _ Web 1]
 *  [webpack 中文文档(v4.15.1)][webpack _v4.15.1]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[webpack]: https://webpack.js.org/concepts/
[webpack 1]: https://webpack.docschina.org/concepts/
[- _ Web]: https://docschina.org/
[Link 1]: https://webpack.js.org/api/cli/
[devtool]: https://webpack.docschina.org/configuration/devtool
[webpack_1_webpack_webpack-dev-server]: https://segmentfault.com/a/1190000012536871
[webpack_2_]: https://segmentfault.com/a/1190000012536917
[webpack_3_ _node]: https://segmentfault.com/a/1190000012560205
[webpack_4_]: https://segmentfault.com/a/1190000012541460
[webpack_5]: https://segmentfault.com/a/1190000012552628
[webpack_6_Vue_webpack]: https://segmentfault.com/a/1190000012560228
[webpack-contrib]: https://github.com/webpack-contrib
[webpack 2]: https://www.cnblogs.com/koala0521/p/8574668.html
[Webpack 4 _2018]: http://www.css88.com/archives/9436
[- _ Web 1]: https://docschina.org/webpack
[webpack _v4.15.1]: http://webpack.css88.com/
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460