初识Webpack

webpack基本功能

模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。

编译兼容。通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。

能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能.

webpack打包流程

1.调用webpack传入时的配置.
2.注册很多webpack内部的插件,包括自己配置的插件.
3.webpack只处理js,因此它会调用我们配置好的loader把对应资源解析成js. webpack会从entry开始调用对应的loader来处理整个依赖树.
4.调用acorn对js进行语法解析,生成语法树,递归遍历语法树,并根据其中的’require’语法收集好依赖.
5.根据收集好的依赖,render出我们最终的结果,也就是一段js代码

基本配置

entry:入口(entry)指示webpack以那个文件为入口起点开始打包,变量构建内部依赖图
output:输出(output)指示webpack打包后的资源bundles输出到哪里去,以及如何命名
loader:loader让webpack能够处理那些非js/json文件(webpack本身只能处理js/json资源)
plugins:插件(plugins)可以用于执行范围更广的任务,插件的范围包括,从打包优化到压缩,一直到重新定义环境中
的变量
mode:模式(mode)分为developmonet(开发模式)和production(生产模式),不同模式指示webpack使用相应模式的配置,前者注重能让代码本地调试,后者注重能让代码是上线运行

配置文件webpack.config.js详解

1.开发环境

//loader: 1.下载 2.使用(配置loader) 
//plugins: 1.下载 2.引入 3.使用
//path.resolve用来拼接绝对路径的方法
const { path } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //入口起点
  entry: './src/index.js'
  //输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量,代表当前文件的目录绝对路径
    path: path.resolve(__dirname,'build')
  },
  //loader的配置
  module: {
    rules: [
      {
        //处理less资源
        test: /\.less$/,
        //要使用多个loader处理用use
        use: [
        //use数组中loader执行顺序:从右到左,从下到上,依次执行
        //创建style标签,将js中的样式资源插入进行,添加到head中生效
        'style-loader',
        //将css文件变成commomjs模块加载到js中,里面内容是样式字符串
        'css-loader',
        //将less文件编译成css文件
        //需要下载less-loader和less
        'less-loader']
      },
     {
       //处理css资源
       test: /\.css$/,
       use: ['style-loader','css-loader']
     },
    {
      //处理图片资源
      //问题:处理不了html中img图片
      test: /\..(jpg|png|gif)$/,
      //下载 url-loader file-loader
      loader: 'url-loader',
      option: {
        //图片大小小于8kb,就会呗base64处理
        //优点:减少请求数量(减轻服务器压力)
        //缺点:图片体积会更大(文件请求速度更慢)
        limit: 8*1024,
        name: '[hash:10].[ext]'
        //问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commomjs,解析时会出现问题:[object Module]
        //解决: 关闭url-loader的es6模块化,使用commomjs解析
       
        esModule:false
     },
    {
      //处理html的img资源(负责引入img,从而能被url-loader进行处理)
      test:/\.html$/,
      loader: 'html-loader'
    },
    {
      //处理其他资源
       exclude: /\.(html|js|css|less|jpg|gif|png)$/,
       loader: 'file-loader',
       options: {
           name: '[hash:10].[ext]'
       } 
     }
  ]
},
plugins: [
  //plugins的配置
  //html-webpaack-plugin:默认创建一个空的html,自动引入打包输出的所有资源
  new HtmlWebpackPlugin({
  //复制'.src/index.html'文件
    template: './src/index.html'
  })
],
mode: 'developmoment',
//开发服务器devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器~~)
//特点:只会在内存中编译打包,不会有任何输出
//启动devServer指令为: npx webpack-dev-server
devServer: {
  //项目构建后路径
  contentBase:path.resolve(__dirname,'bulid'),
  //启用gzip压缩
  compress;true
  //端口号
  port:3000,
  //自动打开浏览器
  open:true

}

}

2.生产环境

```javascript
const { path } = require('path');
const MiniCssTractPlugin = require('mini-css-extract-pluugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//定义nodejs环境
process.env.NODE_ENV = 'production';

//复用loader
const commonCssLoader = [
         //这个loader取代style-loader. 作用:提取js中的css成单独文件
         MinCssExtractPlugin.loader,
        'css-loader',
        //css兼容性处理: postcss --> postcss-loader postcss-prset-env
        //
         {
         //还需要再package.json中定义browserslist
          loader: 'postcss-loader',
          options:{
            ident: 'postcss'
            plugin: () =>[
            //postcss的插件
              require('postcss-preset-env')()
              ]
          }
        }
]
module.exports = {
  entry: './src/index.js'
  output: {
    filename: 'built.js',
    path: path.resolve(__dirname,'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [...commonCssLoader,'less-loader']
      },
     {
       test: /\.css$/,
       use: [...commonCssLoader]
     },
     //语法检查
     
     {
       test: /\.js$/,
       //只检查自己写的源代码,第三方的库是不用检查的
       exclude: /node_modules/,
       //优先执行eslint-loader,再执行babel-loader
       enforce: 'pre',
       loader: 'eslint-loader',
       options: {
       fix: true
        }
      },
      //js兼容性处理
      {
        test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: {
       //预设:指示babel做怎样的兼容性处理
         presets: [
         [
          '@babel/pre-env',
          {
          //实现按需加载兼容性处理
           useBuiltIns: 'usage',
           //指定corejs版本
           corejs: {version:3},
           //指定兼容到哪个版本的浏览器
           targets: {
             chrome: '60'
             firefox: '50'
                     }
           }
          ]
         ]
        }
},
     {
      //处理图片资源
      //问题:处理不了html中img图片
      test: /\..(jpg|png|gif)$/,
      loader: 'url-loader',
      option: {
        limit: 8*1024,
        name: '[hash:10].[ext]'
        outputPath: 'imgs',
        esModule: false
     },
    {
      test:/\.html$/,
      loader: 'html-loader'
    },
    {
      //处理其他资源
       exclude: /\.(html|js|css|less|jpg|gif|png)$/,
       loader: 'file-loader',
       options: {
           name: '[hash:10].[ext]'
       } 
     }
  ]
},
plugins: [
  new MinCssExtractPlugin({
  //对输出的css文件进行重命名
    filename: 'css/bulit.css'
    }),
  //压缩css
  new OptimizeCssAssetsWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: './src/index.html',
    //压缩html代码
    minify: {
      //移除空格
      collapseWhitespace: true,
      //移除注释
      removeComments: true
      }
  })
],
//生产环境会自动压缩js代码
mode: 'production',
devServer: {
  //项目构建后路径
  contentBase:path.resolve(__dirname,'bulid'),
  //启用gzip压缩
  compress;true
  //端口号
  port:3000,
  //自动打开浏览器
  open:true

}

}