webpack的loader,plugin,entry,output,sourceMap,devServer,hotModuleReplacement,babel

**loader

loader打包图片
对某个特定的文件，告诉webpack如何打包

// webpack默认知道怎么打包js
  module: {
    rules: [{
        test: /.\(jpg|png|gif)$/,
        use: {
          loader: 'file-loader', //把文件挪到dist目录，把文件名返回给变量
          options: {
            name: '[name].[ext]'
          }, //保持原文件名 placeholder
            outputPath: 'images/'
        }
      }]
  },

url-loader会把图片转换为一个base64的字符，而不是单独的一个文件
图片1,2kb,用url-lodaer以base64形式打包到js文件中，没必要发一个http请求
          options: {
            name: '[name].[ext]',
            outputPath: 'images/',
            limit: 2048
          }

loader打包样式

css-loader作用，处理inport这种语法。style-header把前者挂载在head<style>里
    rules: [{
      test: /\.css$/,
      use: [
      'style-loader',
      {
		loader: 'css-loader',
		options: {
			importLoaders: 2,
			modules: true  // import style from 'xx.scss'
		}
},
      'scss-loader',
      'postcss-loader']
    }]
    scss文件中@import的scss，不会经过postcss-loader和scss-loader;配置options会经过
    ```

**plugin

plugin可以在webpack运行到某个时刻，帮你做些事情

// npm install --save-dev html-webpack-plugin
// html-webpack-plugin 会在打包结束后，自动生成一个html文件，并把打包后生成的bundle.js自动引入到html中
var HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [new HtmlWebpackPlugin]
//配置<div id="root"></div>
  plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html'
  })],

// npm install --save-dev clean-webpack-plugin
// const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  plugins: [new HtmlWebpackPlugin(),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['dist'],
    })
  ],

extract-text-webpack-plugin,样式打包成单独文件
CommonsChunkPlugin,	某个模块被用到多次，抽出来放在一个单独文件中

**entry,output

// entry,output在打包多个文件时
  entry: {
    main: './src/test.js',
    sub: './src/test.js'
  },
   output: {
    filename: '[name].js',
    // __dirname指webpack.config.js所在的目录
    path: path.resolve(__dirname,'dist')
  }

// //注入到html的<script>携带cdn地址
  output: {
    publicPath: 'http://cdn.com.cn',
    filename: '[name].js',
    path: path.resolve(__dirname,'dist') // __dirname指webpack.config.js所在的目录
  }

**sourceMap（文档在devtool中）

sourceMap是一个映射关系
不是打包后哪行错了，而是源文件哪错了
// 
  mode: 'development'，sourceMap默认配置进去了
  devtool: 'none'
  devtool: 'source-map'
  devtool: 'inline-source-map' //把source-map以
  				//base64形式打包到bundle.js文件中
 devtool: 'inline-cheap-source-map'//;不希望精确到哪列；只会管业务代码，不会管loader,第三方模块下映射关系
 devtool: 'inline-cheap-module-source-map'
 devtool: 'eval' //业务代码和source-map通过eval一起执行，提高打包速度
 eval("conse.log('123')\r\n\r\n\r\n\n\n//# sourceURL=webpack:///./src/test.js?");

// mode:'development'
'cheap-module-eval-source-map'
// mode:'production'
'cheap-module-source-map'

**hotModuleReplacement

// 手动执行npm run bundle && 手动打开html
// 希望改了src源代码，dist目录自动打包
1. 源文件发生变化，webpack重新打包
  "scripts": {
    "watch": "webpack --watch"
  },
2. 自动刷新浏览器---webpack-dev-server:更改代码自动刷新，路径转发
  devServer: {
    // 启动的服务器根路径在dist
    contentBase: './dist',
    open: true, //自动打开浏览器
    proxy: { //跨域，接口模拟
      '/api': 'http://localhost:3000'
    }
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
通过file协议打开html,发ajax请求时有误，必须将html放在服务器上，通过http协议打开
3. npm i express webpack-dev-middleware -D
必须手动刷新，和手动打开浏览器
webpack可以在node.js文件中，通过webpack方法直接调用

  output: {
    //publicPath: '/',
    filename: '[name].js',
    // __dirname指webpack.config.js所在的目录
    path: path.resolve(__dirname,'dist')
  }
//server.js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config.js')
const complier = webpack(config)

const app = new express() //创建express实例

app.use(webpackDevMiddleware(complier,{
 // publicPath: config.output.publicPath
}))

app.listen(3000,()=>{
  console.log('success')
})
  "scripts": {
    "server": "node server.js"
  },

** Hot Module Replacement

devServer会把打包的dist下文件放在内存中
css的变更，不会影响js

//
const webpack = require('webpack')
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
 devServer: {
    // 启动的服务器根路径在dist
    contentBase: './dist',
    open: true, //自动打开浏览器 
    hot: true, //开启HMR
    hotOnly: true //即使HMR没生效，浏览器也不刷新，HMR失效，不做其他处理
  },
//css-loader内置了
//vue-loader内置了
//babel-preset内置了
if(module.hot){
  module.hot.accept('./number',()=>{
    var num = document.getElementById('number')
    document.body.removeChild(num)
    number()
  })
}

**babel

// npm install --save-dev babel-loader @babel/core
让babel识别js,把js转换成AST,编译转换成新语法
// npm install @babel/preset-env --save-dev
es6 -> es5
//npm install --save @babel/polyfill
//index.js
import "@babel/polyfill"; 
补充新语法，如promise
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader",
      options: {
        presets: [["@babel/preset-env",{
            useBuiltIns: "usage", //代码用到时才polyfill
            targets: {
              chrome: "67" //67版没有的才补充
            },    
        }]]
      }
//npm install --save-dev @babel/plugin-transform-runtime ui组件库/类库,避污染全局环境
corejs  option	Install command
false	npm install --save @babel/runtime
2	npm install --save @babel/runtime-corejs2
3	npm install --save @babel/runtime-corejs

.babelrc
把options里拿出来

react下的babel

//npm install --save-dev @babel/preset-react
//babel-loader下的options下的配置可放在一个单独文件中
var foo = 'bar';
{presets: [
  [
    "@babel/preset-env",{
      useBuiltIns: "usage", //import "@babel/polyfill";和 useBuiltIns: "usage",用一个就行
      targets: {
        chrome: "67"
      }
    }
  ] ,
  "@babel/preset-react"
]
}