浅析webpack

使用下面这行命令进行全局安装

npm install -g webpack@4 webpack-cli@3
//或
yarn global add webpack@4 webpack-cli@3

用webpack转义JS

npm init -y

yarn add webpack@4 webpack-cli@3 --dev

下面我们来运行webpack，由于webpack不是全局安装，它在node_modules/.bin/webpack

所以我们调用本地安装的webpack时应该加上路径。

./node_modules/.bin/webpack --version

但是这样不够方便，
可以使用下边这条命令，自动寻找本地webpack地址。

npx webpack

(先忽略警告)生成了一个main.js文件，是我们Index.js的转义

但是npx不够稳定，在windows下不一定能用。

初始化webpack.config.js
现在我们来尝试消除上边出现的webpack警告,当我们仔细观察报错，发现是configuration的问题，于是我们在官方文档中查询。

直接将这段代码复制到本地，

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

但是并不是这段代码中所有内容我们都是需要的，我们只保留修改报错的部分。

var path = require('path');

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

再次运行webpack,成功消除报错
但是我们发现在development模式下，main,js被改变了 但是如果我们把mode修改成production，main.js又变回了原来的样子 下边这种方式没有注释体积更小，上边那种方式方便开发者阅读和debug 。

理解文件名中的hash的用途

webpack 配置 entry和output
我们将上边那段代码修改一下

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

这段代码的作用就是配置转移后的JS文件的入口、出口。

HTTP缓存的意义
我们修改config的代码如下：

var path = require('path');

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

转义的JS文件名改变，这里我们就需要理解HTTP缓存的意义。
HTTP缓存可以避免重复下载相同文件，加快访问网站速度。
但是一定要记住不能让首页index.html缓存，因为如果首页都缓存了，那么我们就无法知道其他页面是否需要更新。
当我们修改文件内容时，文件名的hash就会改变，提示我们缓存不能使用了要更新。

可是每当我们修改文件后运行一次

npx webpack

就会在dist目录下生成一个新的js文件，时间久了该目录下的JS文件就会越来越多，所以我们每次运行webpack的时候都要删除dist目录，可是手动删除太麻烦了而且可能会忘，所以我们修改一下package.json就好。

webpack插件自动生成HTML

官方文档
安装插件

yarn add html-webpack-plugin --dev

观察一下官方文档给的使用方法，自己整合一下。

如果在配置plugin和loader部分遇到报错时，复制下边这段代码到package.json，然后删除node_modules文件，再yarn install，再次重试即可。(注意webpack 、 webpack-cli版本号等内容要和自己本地一致)

{
  "name": "webpack-demo-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "rm -rf dist && webpack --config webpack.config.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "dart-sass": "^1.23.7",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "webpack": "4.46.0",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "^3.9.0"
  }
}

webpack引入CSS

1. 使用JS生成style

yarn add style-loader --dev
yarn add css-loader --dev

记住，我们安装的loader版本要和package.json里对应。
可以使用JS生成style，也可以把CSS抽成文件。

如何预览呢？

cd dist
http-server . -c-1

为了方便我们快速开发，使用webpack-dev-server
webpack-dev-server不依赖dist目录文件，他直接在内存中就搞定了，不需要放到硬盘上，所以速度很快(比build方便)。
和http-server相比较，webpack-dev-server集成了更多的功能，自动刷新等。
对着文档CRM吧...

yarn add webpack-dev-server --dev

添加下图代码

devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  }

 "start": "webpack-dev-server --open",

完成，然后开始运行。
yarn start

2. 使用插件提取CSS文件
CRM官方文档MiniCssExtractPlugin

yarn add mini-css-extract-plugin --dev

使用两个webpack config文件

这么多插件、内容，如何学习呢？
仍然是CRM学习法(抄文档放到本地跑成功了以后修改微调一下再跑)，Google关键词看文档。

如果我们在生产环境需要上传代码，我们就使用yarn build

而在开发环境下自己测试，就使用yarn start 那我们能否用不同的config将它们分开呢，这样我们就可以切换两个插件了。

在两种不同模式下采用不同的config。
开发者模式下

  mode: 'development',

生产模式下

  mode: 'production',

但是我们会发现，这两种模式下，两个文件的代码基本都是相同的，我们没必要写成两个文件，而是应该采用继承的方式。
开发模式下大部分继承base，生产模式下

webpack的作用包括：

1. 压缩代码
2. 将一个或多个JS文件打包成对应的文件(webpack本身只能打包commonjs规范的JS文件，无需安装额外 loader，webpack 自带此功能)
3. 将一个或多个CSS文件打包成对应的文件
4. 将高版本的JS转译成低版本的JS

webpack-dev-server 的作用包括：

1. 提供server方便开发预览
2. 文件内容变化自动转译代码，并刷新页面

webpack 将 CSS 代码提取成单独的文件，需要用到什么 plugin？
MiniCssExtractPlugin

webpack 将 CSS 文件引入到 JS 中，并转为 style 标签插入到 head 标签里，需要用到什么 loader？
css-loader 和 style-loader

loader vs plugin

loader：一对一，一个文件转化成另一个文件。
plugin：多对一，多个文件转化成一个文件。
loader和plugin有什么区别呢？
loader就是加载器(用来load一个文件)，plugin就是插件(加强功能——外挂，虽然loader也变相的拓展了webapck，但是它只是专注于转化文件这一个领域，而plugin的功能更加丰富，不仅局限于资源的加载)。
plugin：一定要记住html-webpack-plugin(生成HTML文件) 和 MiNiCssExtractPlugin(抽取css代码把他变成一个文件)

引入SCSS

任意一个CSS文件的后缀直接改掉，就是一个SCSS。
node-sass已经过时，请使用dart-sass。
CRM开始整sass-loader文档

yarn add sass-loader dart-sass --dev

引入LESS和Stylus

yarn add less-loader --dev

less-loader文档

yarn add stylus-loader stylus --dev

SASS, LESS, Stylus完全没有区别。

使用file-loader引入图片

yarn add file-loader stylus --dev

作用是把文件变成文件路径

webpack import()懒加载

如何实现懒加载：用import()去加载一个文件，会得到一个promise(因为异步)，promise.then前边写成功函数，后边写失败函数。

webpack一键部署到github

我们不一定只有在dist目录里才能预览，这里介绍一种新方法。

//新建一个分支
git branch gh-pages
//进入一个分支
git checkout gh-pages

把所有源代码都删掉

把dist里边的文件都拷贝到当前目录然后删除dist

mv dist/* ./
rm -rf dist

这样我们就有两个分支了，master分支用来存源代码，gh-pages用来预览。

虽然成功了，可是每次上传都要(删除源代码->dist目录文件移出->删除dist目录)，这样也太麻烦了吧。

为了方便，我们可以使用脚本