模块开发之webpack使用（三）

梦里梦外; 2022-05-22 07:23 259阅读 0赞

## 模块开发之webpack使用（三） ##

*   *  模块开发之webpack使用（三）
 *  前言
 *  使用
    
     *  安装
     *  webpack配置文件
     *  webpack命令配置
        
         *  –progress –colors
         *  开启监听模式
     *  使用package.json方式打包
     *  生成源码source-map
     *  本地服务器devServer
        
         *  安装
         *  安装
         *  使用:
         *  详细介绍
            
             *  Hot
             *  host
             *  inline
             *  port
             *  historyApiFallback
             *  compress
             *  contentBase
             *  Open
             *  overlay
             *  quiet
             *  publicPath
             *  proxy
 *  webpack4 Mode的默认设置生产环境与开发环境

# 前言 #

由于现在前端越来越复杂,使用的js扩展语言越来越多,比如ts,jsx等,需要将这些开发的模块转换成浏览器成识别的js,webpack就是模块化打包工具.  
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。  
学习地址[webpack中文文档v3.3.0版本][webpack_v3.3.0]  
[webpack中文文档v2.2.0版本][webpack_v2.2.0]  
[webpack中文文档v4.12.2版本][webpack_v4.12.2]

# 使用 #

## 安装 ##

npm命令

//全局安装
    npm install -g webpack
    //安装到你的项目目录
    npm install --save-dev webpack

## webpack配置文件 ##

一般webpack配置文件是`webpack.config.js`.  
简单的配置

module.exports={
        entry:{
            main:"./src/app.js"
        },
        output:{
            path:path.resolve(__dirname,"app"),
            publicPath:"/",
            filename:"[name].js"
        }

`entry`:指定前端入口js文件.  
`path`:打包后的文件存放的地方  
`publicPath`：指定资源文件引用的目录  
`[name]`:这里app  
`__dirname`:是node.js中的一个全局变量，它指向当前执行脚本所在的目录。  
执行命令:`webpack`,这条命令会自动引用webpack.config.js文件中的配置选项

## webpack命令配置 ##

### –progress –colors ###

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

### 开启监听模式 ###

开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译

webpack --progress --colors --watch

## 使用package.json方式打包 ##

package.json里添加scrips:

.... "scripts": { "dev": "webpack-dev-server --config webpack.dev.config.js" } ....

scripts里可添加自定义的脚本,使用npm可执行该脚本 .npm可以引导任务执行.  
执行命令

npm run dev

我的常用`scripts`如下:

"scripts": {
            "start": "webpack-dev-server --config webpack.dev.config.js --devtool eval-source-map --progress --colors",
            "dev": "npm start",
            "build": "webpack --config webpack.prod.config.js --progress --colors",
            "test": "echo \"Error: no test specified\" && exit 1"
        }

## 生成源码source-map ##

生成Source Maps.生成源码方式,在调试时使用.

<table> 
 <thead> 
  <tr> 
   <th>devtool选项</th> 
   <th align="right">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>source-map</td> 
   <td align="right">在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；</td> 
  </tr> 
  <tr> 
   <td>cheap-module-source-map</td> 
   <td align="right">在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；</td> 
  </tr> 
  <tr> 
   <td>eval-source-map</td> 
   <td align="right">使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；</td> 
  </tr> 
  <tr> 
   <td>cheap-module-eval-source-map</td> 
   <td align="right">这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；</td> 
  </tr> 
 </tbody> 
</table>

**建议**  
中小型项目开发阶段使用`eval-source-map`,大项目里使用`cheap-module-eval-source-map`  
**配置**

module.exports = {
      devtool: 'eval-source-map',
        ....
    }

上面是ES6导出配置对象的方式,最终这个配置要应用到`webpackConfig.devServer`才生效

## 本地服务器devServer ##

### 安装 ###

在开发模式下，DevServer 提供虚拟服务器，让我们进行开发和调试,需要单独安装 .

### 安装 ###

命令

npm install webpack-dev-server --save-dev

### 使用: ###

let webpackConfig =require('./webpack.config')
    webpackConfig.devServer = {
    ...
    }

### 详细介绍 ###

#### Hot ####

热模块更新作用。即修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果。  
这不是和 webpack.HotModuleReplacementPlugin （HMR） 这个插件不是一样功能吗？是的，不过请注意了，HMR 这个插件是真正实现热模块更新的。而 devServer 里配置了 hot: true , webpack会自动添加 HMR 插件。所以模块热更新最终还是 HMR 这个插件起的作用。

#### host ####

写主机名的。默认 localhost

#### inline ####

设置为true，当源文件改变时会自动刷新页面

#### port ####

端口号。默认 8080

#### historyApiFallback ####

如果为 true ，页面出错不会弹出 404 页面。

#### compress ####

如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。

#### contentBase ####

建议绝对路径 .你要提供哪里的内容给虚拟服务器用。

// 单目录
    contentBase: path.join(__dirname, "public")
    
    // 多目录
    contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

默认情况下，它将使用您当前的工作目录来提供内容。

#### Open ####

true，则自动打开浏览器。

#### overlay ####

*  如果为 true ，在浏览器上全屏显示编译的errors或warnings。默认 false （关闭）
 *  如果你只想看 error ，不想看 warning。

overlay：{
        errors：true，
        warnings：false
    }

#### quiet ####

true，则终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的。

#### publicPath ####

配置资源文件路径.

// devServer.publicPath
    publicPath: "/assets/"
    
    // 原本路径 --> 变换后的路径
    http://localhost:8080/app.js --> http://localhost:8080/assets/app.js

#### proxy ####

当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。

proxy: {
        '/proxy': {
            target: 'http://your_api_server.com',
            changeOrigin: true,
            pathRewrite: {
                '^/proxy': ''
            }
      }

*  假设你主机名为 `localhost:8080` , 请求 API 的 `url` 是 `http：//your_api_server.com/user/list`
 *  `'/proxy'`：如果点击某个按钮，触发请求 API 事件，这时请求 url 是`http：//localhost:8080/proxy/user/list` 。
 *  `changeOrigin`：如果 true ，那么 `http：//localhost:8080/proxy/user/list` 变为 `http：//your_api_server.com/proxy/user/list` 。但还不是我们要的 url 。
 *  `pathRewrite`：重写路径。匹配 `/proxy` ，然后变为” ，那么 `url` 最终为 `http：//your_api_server.com/user/list` 。

完整配置如下:

webpackConfig.devServer = = {
        devServer: {
            contentBase: './app',
            port: 8081,
            inline: true,
            open: true,
            openPage: '',
            hot: true,
            proxy: {
                "/api/*": {
                    target: ip,
                    secure: false,
                    changeOrigin: true,
                    pathRewrite: {
                        "/api": "/"
                    }
                }
            },
            overlay: {
                warnings: true,
                errors: true
            }
        }
    }

# webpack4 Mode的默认设置生产环境与开发环境 #

webpack功能强大，有很多独特的功能，但其中一个难点是配置文件。为此,webpack团队改变了这一现状：webpack 4默认不需要配置文件。可以通过mode选项为webpack指定一些默认的配置。mode分为development/production,默认为production。

参考:  
[入门Webpack，看这篇就够了][Webpack]  
[菜鸟教程][Link 1]

[webpack_v3.3.0]: http://www.css88.com/doc/webpack/loaders/sass-loader/
[webpack_v2.2.0]: http://www.css88.com/doc/webpack2/
[webpack_v4.12.2]: https://www.webpackjs.com/concepts/
[Webpack]: https://www.jianshu.com/p/42e11515c10f
[Link 1]: http://www.runoob.com/w3cnote/webpack-tutorial.html