必备技能一、webpack

https://cloud.tencent.com/developer/section/1477376-----》配置很重要

一、基本安装

mkdir webpack-demo && cd webpack-demo  // 创建项目文件夹
npm init -y  // 初始化项目基础信息
npm install webpack webpack-cli --save-dev  // 安装最新版本webpack，如果你使用 webpack 4+ 版本，你还需要安装 CLI----------此安装为webpack与webapck-cli一起安装

 

 package.json

如果你使用的是 npm 5，你可能还会在目录中看到一个 package-lock.json 文件。

“源”代码(/src)———》“源”代码是用于书写和编辑的代码

“分发”代码(/dist)———》“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载

项目：

webpack.config.js

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。

开发环境必备

source map---当 webpack 打包源代码时，追踪到错误和警告在源代码中的原始位置

devtool: 'inline-source-map',

webpack-dev-server--- 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)

 devServer: {
+     contentBase: './dist'
+   },

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

 "scripts": {
+     "start": "webpack-dev-server --open", 
      "build": "webpack"
    },

现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。

 webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，所以我认为可以运行webpack所创建的项目。

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一 -----》它允许在运行时更新各种模块，而无需进行完全刷新。

HMR 不适用于生产环境，这意味着它应当只在开发环境使用。

启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。

+ const webpack = require('webpack');

  module.exports = {
    entry: {
+      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
+     hot: true
    },
+     new webpack.NamedModulesPlugin(),
+     new webpack.HotModuleReplacementPlugin()
    ]
}

或者 --- 》你可以通过命令来修改 webpack-dev-server 的配置：webpack-dev-server --hotOnly。

HMR 修改样式表

借助于 style-loader 的帮助，CSS 的模块热替换实际上是相当简单的。当更新 CSS 依赖模块时，此 loader 在后台使用 module.hot.accept 来修补(patch) <style> 标签。

npm install --save-dev style-loader css-loader

 

生产环境构建

1.开发和生产环境构建

开发环境(development)和生产环境(production)的构建目标差异很大。

通过“通用”配置(webpack-merge )，我们不必在环境特定(environment-specific)的配置中重复代码。

npm install --save-dev webpack-merge

project

 webpack-demo
  |- package.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

webpack.common.js

+ const path = require('path');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+ module.exports = {
+   entry: {
+     app: './src/index.js'
+   },
+   plugins: [
+     new CleanWebpackPlugin(['dist']),
+     new HtmlWebpackPlugin({
+       title: 'Production'
+     })
+   ],
+   output: {
+     filename: '[name].bundle.js',
+     path: path.resolve(__dirname, 'dist')
+   }
+ };

webpack.dev.js

+ const merge = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   }
+ });

webpack.prod.js

+ const merge = require('webpack-merge');
+ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   plugins: [
+     new UglifyJSPlugin()
+   ]
+ });

package.json

 "scripts": {
-     "start": "webpack-dev-server --open",
+     "start": "webpack-dev-server --open --config webpack.dev.js",
-     "build": "webpack"
+     "build": "webpack --config webpack.prod.js"
    },

生产环境

source map

webpack.prod.js

 const merge = require('webpack-merge');
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
+   devtool: 'source-map',
    plugins: [
-     new UglifyJSPlugin()
+     new UglifyJSPlugin({
+       sourceMap: true
+     })
    ]
  });

注意：避免在生产中使用 inline-*** 和 eval-***，因为它们可以增加 bundle 大小，并降低整体性能。　

指定环境(开发和生产)

用于创建编译时 “配置的全局常量”  以方便进行 环境转换，配置默认路径在 webpack.default.dev.conf.js 中 

eg:

new webpack.DefinePlugin({

      'process.env': require('../config/dev.env')

    })；

dev.env.js

module.exports = {

  NODE_ENV: '"development"',

  ENV_CONFIG: '"dev"',

  BASE_API: '"https://api-dev"'

}

在建立 axios 的默认service时

const service = axios.create({

  baseURL: process.env.BASE_API, // api 的 base_url  

//process.env.BASE_API 就是运行时 的动态全局变量

  timeout: 5000 // request timeout

})

可查看https://blog.csdn.net/achenyuan/article/details/83378923帮助理解

webpack4 - 3.Mode内置优化（开发和生产）

webpack 4以上版本提供了mode配置选项，用来选择使用相应的内置优化。

mode选项有3个可选值：production （默认） 、development、none。

可以使用配置文件来指定mode

module.exports = {
  mode: 'production'
};

也可以在执行webpack命令时使用参数来指定mode

webpack --mode=production

1.production模式

webpack4在production模式下，会启用众多优化插件。

1.1 JS Tree Sharking

UglifyJsPlugin支持Tree Sharking，字面意思为“摇树”，在webpack中可以理解成打包过程中移除未使用的内容（js、css）。

继续使用前文的代码，部分修改如下：

src/index.js

import {test1} from './js/test'
document.body.innerHTML = test1()

src/js/test.js

export default function test1() {
    return "test1..."
}

export default function test2() {
    return "test2..."
}

export default function test3() {
    return "test3..."
}

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
};

执行webpack命令，生成dist/index.js文件，搜索"test1..."、"test2..."、"test3..."均能找到，说明在development模式下，test2()、test3()两个函数即使未使用，打包后还是存在的。

接下来尝试以production模式打包，这次不去修改配置文件，而是执行webpack --mode=production打包，检查生成的dist/index.js文件，可以发现仅能找到"test1..."，"test2..."、"test3..."已经不复存在了，而且文件大小也比之前小了很多，说明在production模式下，无用的js内容已经被移除了。

1.2 文件压缩

webpack4中，UglifyJsPlugin还支持文件压缩，这里以jquery为例实践。

安装jquery

 npm install --save jquery

在src/index.js中引入jquery，并使用了jquery的标签选择器修改title内容

import $ from 'jquery'
import {test1} from './js/test'
document.body.innerHTML = test1()
$("title").html("title by jquery");

分别使用webpack --mode=development和webpack --mode=production打包

$ webpack --mode=development
Hash: 4fc1ab8359e975a61ce6
Version: webpack 4.18.0
Time: 350ms
Built at: 09/16/2018 5:57:00 PM
   Asset     Size  Chunks             Chunk Names
index.js  306 KiB   index  [emitted]  index
Entrypoint index = index.js
[./src/index.js] 124 bytes {index} [built]
[./src/js/test.js] 151 bytes {index} [built]
    + 1 hidden module

使用development模式打包时，生成的index.js文件大小为306kb

$ webpack --mode=production
Hash: 3488a0d6f12908778bda
Version: webpack 4.18.0
Time: 2311ms
Built at: 09/16/2018 5:58:00 PM
   Asset      Size  Chunks             Chunk Names
index.js  86.2 KiB       0  [emitted]  index
Entrypoint index = index.js
[1] ./src/index.js + 1 modules 280 bytes {0} [built]
    | ./src/index.js 124 bytes [built]
    | ./src/js/test.js 151 bytes [built]
    + 1 hidden module

使用production模式打包时，生成的index.js文件大小缩减至86.2kb。

总结：webpack4中使用production模式打包时，自动会启用JS Tree Sharking和文件压缩。

2.development模式

development模式下，webpack会启用NamedChunksPlugin 和 NamedModulesPlugin插件。

3.none模式

none模式下，webpack不会使用任何内置优化。

　　

代码分离

动态导入(dynamic imports)

import() 调用会在内部用到 promises。如果在旧有版本浏览器中使用 import()，记得使用 一个 polyfill 库（例如 es6-promise 或 promise-polyfill），来 shim Promise。

package.json参数详解

 https://www.jianshu.com/p/0863270e14d4

运行

webpack 是编译打包用于上线。

执行webpack-dev-server 是启动webpack的服务器，打包后的代码在内存中，不会输出到项目目录，同时具有热更新的功能。

关于如何使用webpack命令行传入变量，并在全局通过process.env来调用

inline：自动刷新
 
--hot：热加载
 
--port：指定端口
 
--open：自动在默认浏览器打开
 
--host：可以指定服务器的 ip，不指定则为127.0.0.1