webpack学习笔记(一)

常见的loaders

• babel-loader 转换es六、es7等js新特性语法
• css-loader 支持css文件的加载和解析
• less-loader 将less文件解析成css
• ts-loader 将ts转换成js
• file-loader 进行图片、字体等的打包
• raw-loader 将文件以字符串的形式导入
• thread-loader 多线程打包css和js

  用法：

  const path = require('path');
  module.exports={
      output:{
          filename:'bundle.js'
      },
      module:{
          rules:[
              {test:/\.txt$/,use:'raw-loader'} //test:指定匹配规则 ， use:指定使用的loader名称
          ]
      }
  }
  复制代码

经常使用的plugins

• CommonsChunkPlugin:将chunks相同的模块代码提取成公共js
• CleanWebpackPlugin:清理构建目录
• ExtractTextWebpackPlugin:将css从bundle文件里提取成一个独立的css文件
• CopyWebpackPlugin:将文件或者文件拷贝到构建的输出目录
• HtmlWebpackPlugin:建立html文件去承载输出的bundle(多页面打包时使用)
• UglifyjsWebpackPlugin:压缩js
• ZipWebpaackPlugin:将打包出的资源生成一个zip包

  用法：

  const path = require('path');
  module.exports = {
      output: {
          filename:'bundle.js'
      },
      plugins:[
          new HtmlWebpackPlugin({
              template:'./src/index.html'
          })
      ]
  }
  复制代码

mode构建环境

• production:设置process.env.NODE_ENV的值为production,默认开启一些插件FlagDependencyUsagePlugin,FlagIncludeChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin
• development：设置process.env.NODE_ENV的值为development,开启NamedChunksPlugin和NamedModulesPlugin
• none:不开启任何插件

添加es6解析

解析es6的语法须要babel-loader,而babel-loader依赖于babel,因此须要创建babel的配置文件.babelrc

{
    "presets":[],//presets为一系列babel plugins的集合
    "plugins":[] //一个plugin对应一个功能
}
复制代码

• 一、安装npm i @babel/core @babel/preset-env babel-loader -D

-D:--save dev

• 二、建立.babelrc文件，添加presets

  {
      "presets":[
          "@babel/preset-env" //es6的babel preset配置
      ]
  }
  复制代码

• 三、在webpack.config.js中添加babel-loader,只校验js就能够

  module.exports = {
      entry:{...},
      output:{...},
      mode:"production",
      module:{
          rules:[
              {test:/\.js$/,use:'babel-loader'}
          ]
      }
  
  }
  复制代码

• 四、npm run build

添加react jsx解析

• 一、安装插件 npm i react react-dom @babel/preset-react -D
• 二、添加presets

{
    presets:[
        "@babel/preset-react"
    ]
}
复制代码

• 三、编写测试代码

  'use strict'
    import React from 'react';
    import ReactDom from 'react-dom';
  
    class Search extends React.Component {
        render(){
            return <div>Search Test</div>
        }
    }
  
    ReactDom.render(
        <Search/>,
        document.getElementById('root')
    )
  复制代码

添加html模板解析

添加插件html-webpack-plugin，自动解析模板，不用每次去建立html

• 一、安装 npm i html-webpack-plugin -D
• 二、在webpack.config.js中引用 const HtmlWebpackPlugin = require('html-webpack-plugin')
• 三、添加模板

  'use strict'
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        entry:{...},
        output:{...},
        module:{rules:[...]},
        plugins:[
            new HtmlWebpackPlugin({
                template:'./public/index.html' //模板
            })
        ]
    }
  复制代码

  github源码：github.com/logmei/webp…