webpack

webpack介绍

webpack可以看成是一个模块化打包机，从入口开始，可以分析项目的依赖，打包成静态资源（html css js 图片）。
webpack可以实现的功能有：

• 代码转换：将高级语法转为低级语法，比如ES6转ES5，Less Sass转化为CSS
• 文件优化：文件压缩打包
• 自动刷新：webpack为我们提供一个本地服务，实现热更新，代码变更后更新页面
• 代码分割：公共模块的分离
• 模块合并：多个模块合并成一个模块
• 代码校验
• 自动发布
  webpack使用node编写

webpack基础配置

1. webpack安装
   • 安装本地的webpack，因为全局的可能会导致版本不一致
   • webpack 需要先初始化 npm init
   • webpack 4需要安装 webpack 和webpack cli -D(表示开发依赖）
2. webpack配置
3. webpack执行
   • 执行webpack命令： npx webpack
   • webpack执行会默认寻找node_moduled下的bin文件，bin中有一个 webpack.cmd，里面写了如果当前文件目录下有 node.exe 就会执行这个，否则执行当前目录下的上一级的webpack的webpack.js文件（也就是node_modules/webpack/webpack.js文件，需要用上webpack cli）
   • webpack打包后的结果可以在浏览器环境中运行！！

webpack配置一-只能打包js

• 配置文件：webpack.config.js
  为什么叫这个名字？ 默认运行node_modules下的webpack，webpack又会调用webpack cli，cli中包含解析的关系，cli中有一个 config-yargs.js文件，里面的配置说明了默认的文件名-一个 webpack.config.js 一个 webpackfile.js
• 配置文件名不一定为webpack.config.js，可以通过 npx webpack --config 指定名字来指定配置文件。
• 还可以在 package.json对这些命令进行重命名

"scripts":{
	"build": "webpack --config webpack.config.js"
}
//通过 npm run build 来执行配置的命令
//还可以在后面添加两个 -- 来进行传参
//例 npm run build -- 参数

let path = require('path')
module.exports = {
    mode: 'development', //两种 production 和 development
    entry: '', //入口
    output: { //出口文件（文件名 路径）
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist') //路径，必须是绝对路径，所以使用path.resolve
    }
}

wepack配置二-HTML插件HtmlWebpackPlugin

我们希望webpack可以将打包后的文件插入到HTML中，并且把结果放在我们想要输入的build目录下面去。

1. 根据自己指定的HTML模版去生成HTML文件
2. 将打包后的js文件插入到HTML文件中去

• 压缩HTML

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    devServer: {
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true
    },
    mode: 'development', //两种 production 和 development
    entry: '', //入口
    output: { //出口文件（文件名 路径）
        filename: 'bundle.[hash].js', //添加hash值，每次都生成一个新文件
        path: path.resolve(__dirname, 'dist') //路径，必须是绝对路径，所以使用path.resolve
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:'', //模版路径
        filename:'index.html',
        minify:{
          removeAttributeQuotes:true, //删除双引号
          collapseWhitespace:true, //折叠空行
          hash:
        }
      })
    ]
}

webpack配置三-CSS处理-css-loader style-loader

• webpack默认只能解析JS模块，要解析CSS模块，必须使用css-loader

• loader的作用：

  1. 将源代码进行转化，转化成模块
  2. loader可以多个组合使用，多个loader使用数组
  3. loader顺序是从右向左执行

    module: { //模块
        rules: [{
            test: /\.css/,
            use: [{ //use是一个数组，loader可以以对象的形式插入
                loader: 'style-loader',
                options: {

                }
            }, 'css-loader']
        }]
    }

• 我们在html文件中通过<script>标签插入的CSS样式，会在打包的CSS标签的上面，导致优先级没有它高。解决：style-loader的options里面配置 insert:top

webpack配置四-Sass处理-Sass-loader

• Sass-loader：解析Sass成css
• Less-loader:
• 还可以使用mini-css-extract-plugin将css样式进行抽取合并成一个文件，以link标签的形式插入

postcss-loader(添加浏览器前缀）

postcss-loader自动添加浏览器前缀，默认会调用postcss.config.js文件

webpack打包出来的文件解析

• 一个自动执行的匿名函数
• 参数是一个对象，里面的属性是模块的路径，值是匿名函数

常见loader作用：

• css-loader
  解析CSS，主要是负责解析@import 路径，因为有时候CSS文件中会@import导入CSS
• style-loader
  将CSS插入到head标签中
• postcss-loader
  自动添加浏览器前缀
• file-loader和url-loader的作用

常见插件作用

• mini-css-extract-plugin插件：将css抽取成一个文件，以link标签的形式插入到html文件中
• optimize-css-assets-webpack-plugin插件:
  用来压缩css，使用它必须配合uglifyJs一起，不然使用了它js就不会被压缩了
• CleanWebpackPlugin插件:
  每次构建前清除dev-server构建的dist目录
  重新构建后，再生成dist目录
  实现了实时将文件覆盖，不存在缓存
• DefinePlugin插件
  用来设置全局变量

webpack掌握内容

1. webpack常见配置
2. webpack高级配置
3. webpack优化策略
4. webpack中的Tapable
5. webpack流程，手写webpack
6. ast抽象语法树
7. 手写webpack中常见loader
8. 手写webpack中常见plugin