webpack笔记

超、凢脫俗 2022-04-16 01:24 175阅读 0赞

WebPack可以看做是**模块打包机**：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

### 1、初步webpack 进行代码打包 ###

如果没有webpack.config.js

那么则在打包的时候，操作如下

导出一个模块 `module.exports = 需要导出的对象`
    
        导入一个模块 `var 模块名 = require(文件路径)`
    
        webpack 打包命令 
        `webpack 需要打包的文件名 输出的文件名`
    
        例如:
        `webpack main.js build.js`

### 2、初步webpack 配置文件  ###

有默认配置文件的话,webpack全局安装，自动引用`webpack.config.js`文件中的配置选项

默认配置文件名称webpack.config.js
    
        module.exports = {
                entry:'*需要打包的文件*' // 路径+文件名 一般为 ./src/xxx.js
                output:{
                        path:'*输出文件的路径*' // 绝对路径 使用__dirname + 路径
                        filename:`*输出文件的名称*` // 一般都为build.js/bundle.js
                }
        }
    
        2. 使用webpack进行打包
                - 如果是默认配置文件 则直接在命令行中 输入 `webpack`
                - 如果是其他改过名字的配置文件 则使用 `webpack --config 配置文件名`

###  3、webpack进一步了解 ###

3.1、Source Maps

（使调试更容易），Source Maps方便的调试能极大的提高开发效率，在`webpack`的配置文件中配置`source maps`，需要配置`devtool，devtool`有以下集中模式（index.js文件查看dev.`devtool`）

<table> 
 <thead> 
  <tr> 
   <th>模式</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>eval</td> 
   <td>每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释&nbsp;<code>//@ sourceURL</code>.</td> 
  </tr> 
  <tr> 
   <td>source-map</td> 
   <td>生成一个<strong>SourceMap</strong>文件.</td> 
  </tr> 
  <tr> 
   <td>hidden-source-map</td> 
   <td>和 source-map 一样，但不会在 bundle 末尾追加注释.</td> 
  </tr> 
  <tr> 
   <td>inline-source-map</td> 
   <td>生成一个&nbsp;<strong>DataUrl</strong>&nbsp;形式的 SourceMap 文件.</td> 
  </tr> 
  <tr> 
   <td>eval-source-map</td> 
   <td>每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.</td> 
  </tr> 
  <tr> 
   <td>cheap-source-map</td> 
   <td>生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）</td> 
  </tr> 
  <tr> 
   <td>cheap-module-source-map</td> 
   <td>生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。</td> 
  </tr> 
 </tbody> 
</table>

webpack 不仅支持这 7 种，而且它们还是可以任意组合上面的eval、inline、hidden关键字，就如文档所说，你可以设置 souremap 选项为 cheap-module-inline-source-map。如果你的modules里面已经包含了SourceMaps，你需要用source-map-loader 来和合并生成一个新的 SourceMaps。

**开发环境推荐：**

**`cheap-module-eval-source-map`**

**生产****环境推荐：**

**`cheap-module-source-map`**

3.2、webpack构建本地服务器

浏览器监听代码的修改，并自动刷新显示修改后的结果，`Webpack`提供一个可选的本地开发服务器，这个本地服务器基于node.js构建的

devServer: {
        clientLogLevel: 'warning',
        historyApiFallback: {//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
          rewrites: [
            { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
          ],
        },
        hot: true,//实现浏览器监听源文件修改试试刷新
        contentBase: false, // since we use CopyWebpackPlugin.//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
        compress: true,//是否开启gzip压缩
        host: HOST || config.dev.host,//ip
        port: PORT || config.dev.port,//端口
        open: config.dev.autoOpenBrowser,//打开浏览器
        overlay: config.dev.errorOverlay
          ? { warnings: false, errors: true }
          : false,
        publicPath: config.dev.assetsPublicPath,//公共默认路径
        proxy: config.dev.proxyTable,//代理
        quiet: true, // necessary for FriendlyErrorsPlugin
        watchOptions: {
          poll: config.dev.poll,
        }
      },

3.3、loader

3.4、Babel

*  `test`：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
 *  `loader`：loader的名称（必须）
 *  `include/exclude`:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

*  让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；

babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。

未完待续。。。