1.安装webpack

mkdir webpack-demo//创建webpack-demo目录
cd webpack-demo//进入目录
npm init -y//使用所有默认配置初始化npm
npm install webpack webpack-cli --save-dev//安装依赖
npm info webpack version//查看包的最新版本

2.用webpack转译js

2.1创建src/index.js

2.2调用本地安装的webpack

./node_modules/.bin/webpack 
npx webpack//等价于上面的命令,npx命令可以自动寻找可用的命令

2.3运行之后出现main.js文件

2.4转译复杂的js

新建x.js文件,导出字符串’xxx’

在index.js中引入x.js文件,声明导出的内容赋值到x,打印x

用webpack转译后,直接显示xxx

3.去除警告,设置mode模式（上线build，开发start）

3.1警告内容

mode选项没有被设置

3.2官网设置mode的内容

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

3.3development模式运行webpack（开发者模式）

使用开发者模式

打开main.js,发现里面的代码是可以看的,不是之前那种一坨代码,而且还有注释
其实这部分代码和之前的代码的效果是一样的,不过这是可以给人看的,之前的是给机器看的

3.4production模式运行webpack（体积最小）

设置为production模式

打开main.js,里面的代码又变成一坨的了

3.5entry和output

总体来说就是需要将那个文件的代码转译,并把转译的代码放到什么地方

4.文件名中哈希的用途:和HTTP缓存有关

4.1HTTP缓存(catch control)

如果没有缓存:
第一次访问baidu.com,会返回几个文件,index.html,会引入1.css,2.css,1.js,2.js,
第二次访问百度,任然会把之前下载的文件再下载一遍
如果有缓存:
第一次下载完后,1.css,2.css,1.js,2.js文件设置为缓存一年,第二次访问的时候,只需要下载index.html,不需要每次都去下载css,js文件了,可以直接从缓存中读取,加速网页的加载速度

使用缓存加载的baidu,花了1.19s

不使用缓存花了1.6s

这个zhidao的网页的最大缓存时间为2592000秒,是30天,就是30天内,再次访问百度的时候,不需要重复下载zhidao这个网页

4.2在文件名中加入哈希

之前打包的main.js的哈希为87a5

修改了main.js文件后再次打包,生成了新的main.js文件,哈希为5ea2

只要文件的内容修改,那么打包后的文件名也会更改,浏览器请求网页的时候如果使用的还是以前的文件名,那么它会从缓存中取出,如果是新的文件,它再去服务器下载.同时首页不能做缓存,如果缓存了那如果修改了内容,浏览器也不知道

5.运行webpack前删除dist目录防止dist目录里面打包的文件越来越多

6.用插件生成html

6.1下载html-webpack-plugin插件

npm install --save-dev html-webpack-plugin

6.2在webpack中加入代码

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

6.3运行build,生成index.html文件

生成了一个空的HTML文件,自动引入了生成的main.js

6.4设置生成的index.html文件的模板

plugins: [
    new HtmlWebpackPlugin({
      title: "ddb",//html文件的title
      template: "src/assets/index.html",//生成的文件模板
    }),
  ],

设置模板内容

运行build,看到生成的html,title没有变成设置的内容,在body的最后增加了script标签

6.5设置生成的index.html文件的title

在模板的title设置这个代码,会自动使用配置里面的title

<%= htmlWebpackPlugin.options.title %>

6.6使用淘宝的viewport

代替默认的viewport

7.webpack引入css

7.1安装2个插件

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

7.2配置插件

在webpack.config.js中配置插件,css-loader的作用是将所有.css结尾的文件读到js文件里面,style-loader的作用是将读到的css内容变成style标签放到html的head标签里面

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

7.3创建css文件

7.4将css引用到x.js中并打印css文件的内容

需要先删除config.js文件中的style-loader,这样才能打印这个内容

打印出css文件的内容

7.5build的时候会将css转为style元素的内容放到html的head标签中

8.使用webpack-dev-server(网页预览可以自动更新且不依赖dist目录)

8.1安装webpack-dev-server

npm install --save-dev webpack-dev-server
//yarn add webpack-dev-server --dev

8.2配置webpack-dev-server

webpack.config.js的配置

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

package.json的配置

"start": "webpack-dev-server --open",//open为是否帮你打开浏览器

yarn start
//npm start

将颜色改为灰色,预览页面也变化了

9.使用插件提取css文件

https://webpack.docschina.org/plugins/mini-css-extract-plugin/

9.1安装插件

npm install --save-dev mini-css-extract-plugin

9.2配置webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // 类似于 webpackOptions.output 中的选项
      // 所有选项都是可选的
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // 忽略有关顺序冲突的警告
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 你可以在这里指定特定的 publicPath
              // 默认情况下使用 webpackOptions.output 中的 publicPath
              publicPath: '../',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

9.3使文件名加上哈希

9.4运行yarn build

dist目录生成了css文件,在index.html中用link标签引入了css文件

预览也能看到页面出现了link标签

10.使用2个webpack-config文件(开发环境development,生产环境production)

10.1创建源文件和开发者文件

将webpack.config.js的开发者模式和用户模式相同的代码放到webpack.config.base.js中
webpack.config.js中只留下开发者模式的代码，webpack.config.prod.js中留下用户模式的代码

10.2配置package.json

在package.json的build后面加上 --config webpack.config.prod.js
开发的时候就用yarn start
打包发布的时候就用yarn build

11.HTTP缓存原理(html不能缓存)

12.loader和plugin的区别

loader 是加载器，plugin是插件

loader用来load(加载)文件的，比如说bable-loader是把高级的js加载成浏览器支持的js，style/css loader是加载css把它变成页面中的style标签，也可以加载图片文件对图片进行优化

plugin用来扩展webpack的功能的，比如有个插件叫HtmlWebpackPulgin，它是用来生成html文件的，还有MinicssExtractPlugin，它是用来抽取css代码把它生成一个文件的

13.引入SCSS

13.1下载sass-loader

npm install sass-loader sass webpack --save-dev//sass就是dart-sass

13.2配置scss

意思是如果文件后缀是.scss,那就用sass-loader,css-loader,style-loader转译它

13.3修改css文件后缀为scss

x.css和y.css改为x.scss,y.scss

x.js中引入的文件也需要修改

13.3运行(开发环境)

14.引入less

14.1安装less-loader

npm install less-loader less --save-dev//安装less-loader和less

14.2配置webpack.config.js

//在base文件中加入的代码
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader', // compiles Less to CSS
      },
    ],
  },
};

14.3修改文件后缀

14.4运行yarn start

15.引入stylus

15.1安装stylus

npm install stylus-loader stylus --save-dev//安装stylus-loader和stylus

15.2配置webpack.config.js

15.3修改文件后缀

15.4运行yarn start

16.用file-loader引入图片（把文件变为文件路径）

16.1安装file-loader

npm install --save-dev file-loader//安装file-loader

16.2配置webpack.config.js

16.3在index.js中引入图片并插入到图片的src中

file-loader的作用是把文件变成文件路径

17.webpack import ()懒加载(import())

当用户点到某个模块再加载，防止js过大，一开始加载过慢。

17.1新建lazy.js文件

17.2在页面上增加一个按钮,当点击按钮的时候再加载js

用import()去加载这个文件，然后将它赋值到一个promise变量中，promise如果成功了就执行then函数参数中的第一个函数,打印这个文件的内容,可以看到控制台显示是个模块,默认值就是导出的函数

17.3获取模块的默认值并执行

17.4点击按钮后执行lazy.js导出的函数

18.部署到GitHub

18.1提交代码,本地测试

git add .//提交当前目录
git commit -m '准备上传了'
yarn build//生成dist目录,dist目录里面的文件就是一个网站了
cd dist/  //进入dist目录
hs -c-1 //使用http-server预览
cd .. //回到上一级目录
git push//提交代码到远程仓库

本地预览没有问题

18.2第一种方法:上传dist目录

网页在dist目录中,之前没有上传dist目录

//将/dist 从.gitignore中删除
git add .
git commit -m 'add dist'
git push

出现dist目录

到github pages开启需要预览的分支

加上dist/index.html就能预览了

18.3第二种方法:使用分支

18.3.1删除远程仓库dist目录

rm -rf dist//删除dist分支
//在.gitignore中增加/dist目录
git add . //提交删除dist目录
git commit -m 'remove dist'
yarn build //重新生成新的dist
git push

dist目录删除了

18.3.2创建分支,删除多余文件,提交代码

git branch gh-pages//创建gh-pages分支
git checkout gh-pages//进入gh-pages分支
rm -rf /src *.js *.json yarn.lock
git add .
git commit -m 'remove source code'
mv dist/* ./ //把dist目录里面的文件剪切到当前目录
rm -rf dist//删除dist目录
git add .
git commit -m 'create website'
git push --set-upstream origin gh-pages//第一次提交需要这么写,后面可以直接git push

gh-pages分支就有代码了

18.3.3将预览页面改为gh-pages分支

18.3.4创建部署脚本

在master分支新建deploye.sh文件并提交

//生成最近的dist目录
//命令用&&连起来,防止前面的没有执行也可以执行后面的命令
yarn build &&
//进入gh-pages分支
git checkout gh-pages &&
//将dist目录的所有文件移到当前目录
mv dist/* ./  &&
//删除dist目录
rm -rf dist  
git add . &&
git commit -m 'update' &&
git push &&
//回到上一个分支
git checkout -

sh ./deploy.sh //执行脚本

19.部署到gitee

19.1创建远程仓库

只选择公开,其他全部取消

19.2将远程仓库和本地仓库建立联系

git remote add gitee xxx //xxx为创建仓库时给的地址,就是把origin改为gitee
git remote -v //查看远程仓库的信息

新建一个deploy_cn.sh文件,将之前的deploy.sh文件的内容复制过来,修改

//git push替换为
git push gitee gh-pages:master //将gh-pages分支上传到gitee的master分支