webpack实战总结2.0

package.json

husky

husky可以让我们向项目中方便添加git hooks。通常情况下我只需要如下两步就可在项目中引入并设置好husky

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

nodemodule

我们需要区分npm包里的公共接口和它的私有实现，只有main文件（默认是index.js）里export出来的模块是公共模块，其他文件导出的模块我们都认为是内部私有实现，不应该被外界使用，所以：

对于npm 包的提供方，应该只把main文件当做大家会使用的公共模块，没有在这个文件里出现的模块，应该认为大家都不会使用
对于npm包的使用者，应该只通过import整个包的方式（如import { nm } ‘@ xc/math’)，引用其中的内容，避免使用深层路径引用的方式（如import nm from ‘@ xc/math/nm’)

Babel

JavaScript编译器，从项目根目录下的. babelrc中读取配置
下载插件以及对应依赖模块，一个plugin接入，preset列出使用的新语法

例子：
ES6的class用ES5的prototype实现
为新的API注入polyfill，例如fetch API

typescript

全局安装typescript 之后，携带安装编译器tsc
tsc h.ts命令编译出. js文件和js.map文件
tsconfig. json
集成到webpack（方法之一）
loader（module）
extensions增加ts后缀

源码转换有文件合并的过程，所有内部变量都改了名字=>js.map文件记录位置信息，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

scss

Scss 是 Sass 3 引入新的语法，Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

#sidebar
width: 30%
background-color: #faa

#sidebar {width: 30%; background-color: #faa}

scss语法类似css, sass语法类似ruby
scss官方提供了多种编译器，将其编译成在浏览器环境下运行的css,例如node-sass
C++编写，再用node封装

集成到webpack（方法之一）
sass-loader（module）和css-loader（导入语句，CSS module,压缩css）和style-loader（JavaScript注入样式）

postCSS

postCSS css处理工具, JavaScript编写，运行在node上，配置文件postcss.config.js。

可以通过插件机制扩展自己的功能，更灵活
自动添加前缀，适配各浏览器
使用下一代css语法
集成到webpack（方法之一）postcss-loader

React

Babel和Typescript都提供了支持

Babel导入React

1、两者都需要先安装react、react-dom
Babel原生不支持JSX语法，还需要安装新的依赖babel-preset-react
修改. babelrc，加入

"presets": ["@babel/preset-react"]

然后就可以使用了

import * as React from 'react';
import { Component } from 'react';
import { render } from 'react-dom';
class Button extends Component {
	render(){
		return <h1>hello</h1>
	}
	render(<Button/>,window.document.getElementById('app'));
}

Typescrip导入React

1、两者都需要先安装react、react-dom
Typescrip原生支持JSX语法，不需要安装新的依赖，只需要在tsconfig.json中添加

{
	‘compilerOptions’ :{
	 	'jsx':'react'
	}
}

使用了jsx语法的文件后缀必须是tsx
webpack.config.js

resolve: {
	extensions: [ '.ts','.tsx','.js' ]
}

vue

Babel导入vue

vue一般通过babel集成
vue-loader:解析 .vue文件，提取出其中的逻辑代码script、style、template并把他们交给对应的loader
css-loader、vue-template-compiler

使用typescript编写vue

vue从2.5.0版本开始就提供了对typescript的良好支持

为单页应用生成HTML

只输出了一个 bundle.js 文件，所以可以通过模板文件生成

模板文件语法

模板文件：描述哪些资源需要以某种方式加入到输出的HTML文件中

.tpl文件，实质是一个函数

//变量使用
{$foo={counter}+3}                  // 标签内的标签

//注释
{* 我是一个Smarty的注释, 显示输出时我不会存在  *}

//函数使用
{include file="header.tpl"}

EJS是一个简单高效的js模板，用来生成html标签。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装

EJS常用标签
<% %>流程控制标签
<%= %>输出标签（原文输出HTML标签）
<%- %>输出标签（HTML会被浏览器解析）
<%# %>注释标签
% 对标记进行转义

<link rel='stylesheet' href='app?_inline'>

url字符串可以分为两部分，例如：
app?_inline
前面的app表示CSS代码来自名叫app的chunk
后面的 inline表示这些代码需要被内嵌到这个标签所在的位置

除了_inline还支持
_dist 只有生产环境下引入该资源
_dev 只有开发环境下引入该资源
_ie 只有ie浏览器下引入该资源

配置模板文件

webpack.config.js

plugins:[
   // 一个webPlugin对应一个HTML文件
   new WebPlugin({
	    template:'HTML模板文件所在路径', 
	    filename:'index.html' // 输出HTML的文件名称
  }),
   new ExtractTextPlugin({
   		filename:`[name]_[coontenthash:8].css`, // 为输出的CSS文件名称加入Hash值
   }),

   // 定义环境变量
   new DefinePlugin({
	   'process.env':{
	        // NODE_ENV定义为production，以去除源码中只有开发时才需要的部分
	   		NODE_ENV:JSON.stringify('production')
	   }
   }),

 // 压缩代码输出
   new UglifyJsPlugin({
   		// 最近凑的输出
   		beautify: false,
   		// 删除注释
   		comments: false,
   		// 具体压缩操作的配置
   		compress: {
   			warnings：false, // 删除没有用到的代码时候不输出警告
   			drop_console: true, // 删除所有‘console’语句，可以兼容IE浏览器
   			collapse_vars: true, // 内嵌已定义但是只用到一次的变量
   			reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
   		}
   })
]

补充：webpack切换开发环境、生产环境

开发环境和生产环境的区别是调用的接口地址、资源存放地址、线上的资源是否需要压缩等方面
在package.json中设置一个node的全局变量，然后在webpack.config.js中进行生产环境和开发环境的配置切换

管理多页应用

按照之前单页的生成方法，出现多页的时候。每增加一页就需要配置一个new WebPlugin实例，同时将页面对应的入口加入entry配置项中
解决方法之一：

web-webpack-plugin插件的功能：
WebPlugin为单个应用生成HTML
AutoWebPlugin管理多个单页应用，可以找到一个目录下所有的页面入口，自动为所有的页面入口配置一个WebPlugin输出对应的 html。

AutoWebPlugin支持所有WebPlugin支持的功能

AutoWebPlugin来解决问题，AutoWebPlugin强制规定了项目部分的代码结构
将所有单页应用的代码都放到一个目录pages下
一个单页应用对应一个文件夹，且每个文件夹都有一个index.js作为入口执行文件

然后修改webpack配置文件
webpack.config.js

const path = require('path');
const { AutoWebPlugin } = require('web-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 使用AutoWebPlugin自动寻找pages目录下的所有目录，将每一个目录看成一个单页应用
const autoWebPlugin  = new AutoWebPlugin('pages', {
    template: './template.html', // HTML模板文件所在的文件路径
    postEntrys:['./common.css'],// 所有的页面都依赖的共用的css样式文件
    // 提取所有页面的公共代码
    commonsChunk: { 
        name: 'common'// 提取出公共代码的Chunk名称
    }
});
module.exports = {
    // AutoWebPlugin会为寻找到的所有单页应用生成对应的入口配置
    // autoWebPlugin.entry方法可以获取所有由autoWebPlugin生成的入口配置
    entry: autoWebPlugin.entry({
			// 这里加入 我们额外需要的chunk入口
    }),
    output:{
        filename: '[name]_[chunkhash:8].js',
        path: path.resolve(__dirname, './dist'),
    },


    module: {
        rules: [
            {
                test: /\.js$/,
                use:['babel-loader'],
                exclude: path.resolve(__dirname, 'node_modules'),
            },
            {
                test: /\.css/,
                use: [
                     MiniCssExtractPlugin.loader,
                     'css-loader'
                ]
            }
        ]
    },
    plugins: [
        autoWebPlugin,
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]   
}

autoWebPlugin回味每个单页应用生成一个chunk配置和WebPlugin配置

同构应用

一份代码同时可以在浏览器和服务器中运行
目前大多的单页应用的视图都是通过JavaScript代码在浏览器渲染出来的，但是在浏览器渲染有不利于SEO、渲染性能的缺点
所以提出了SSR，核心在于虚拟DOM

webpack.config.js：用于构建浏览器环境
webpack_server.config.js：用于构建服务器环境

Electron

是Node.js和Chromium浏览器的结合体，用Chromium浏览器显示出的Web应用作为GUI，通过Node.js和操作系统交互。
Node.js和Chromium浏览器都是跨平台的，所以同一份代码可以不同操作系统运行。

Visual Studio Code 跨平台、开源、免费的编辑器，开发： TypeScript + Electron

离线应用

用webpack构建使用Service Workers接入的离线应用时候，社区里面有人做好插件
ServiceWorkerWebpackPlugin