file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件

url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)

image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积

html-loader html 代码里处理 img 标签的 loader。

style.css

@import '../assets/font/iconfont.css';

div{ color:red;}
body{ background-image: url('../assets/sun.jpg');}

index.js

import {header} from './header.js'
import './css/style.css'
import './css/style.less'
import pic from './assets/pic1.jpg'
document.body.append(header);

var img = new Image();
img.src=pic;

// img.src=pic;
document.body.append(img);
var box = document.createElement("div");
box.innerHTML='<span class="iconfont icon-shouye1"></span> <span class="iconfont icon-shouye"></span>';
document.body.append(box);

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
    devServer: {
        contentBase: './dist',
     },
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    // mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main-[hash].js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[

            {
                test: /\.(png|jpg|gif|jpeg|ico)$/,
                use:[{loader:'url-loader',options:{limit:50000,name: 'img/[name].[hash:5].[ext]'}},'image-webpack-loader']
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.(eot|woff2|woff|ttf|svg)/,
                use:[{loader:'url-loader',options:{limit:10,name: 'font/[name].[hash:5].[ext]'}}],
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',

          }),
    ]
}

babel 与react

@babel/core-babel核心模块
@babel/preset-env-编译ES6等
@babel/preset-react-转换JSX

cnpm i babel-loader @babel/core @babel/preset-env  @babel/plugin-transform-runtime   @babel/preset-react -D

 @babel/plugin-transform-runtime: 避免 polyfill 污染全局变量，减小打包体积
 @babel/polyfill: ES6 内置方法和函数转化垫片

cnpm i @babel/polyfill @babel/runtime -D

main.js

import ReactDom from 'react-dom'
import React,{Component} from 'react'
class App extends Component{
    constructor(props){
        super(props);
        this.state={num:1}
    }
    render(){
        return (<div>react <button onClick={
            ()=>{this.setState({num:++this.state.num})}
        }>{this.state.num}</button></div>)
    }
}
ReactDom.render(<App/>,document.getElementById("root")) 

webpack.config.js

{ 
    test: /\.(js|jsx)$/, 
    use:['babel-loader'],
    exclude: /node_modules/ 
},

.bablerc

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
}

压缩

optimize-css-assets-webpack-plugin css优化压缩

uglifyjs-webpack-plugin js压缩

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization: {
    minimizer: [new UglifyJsPlugin(), new OptimizeCSSAssetsPlugin({}),],

      }, 

代码分割

optimization: {
    splitChunks: {
        chunks: "all", 
        // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}, 

sourceMap

当错误了，能够知道源代码在那一行 sourceMap 他是一个map关系，他知道dist/main。就是文件96行错误，对应src目录下index.js第一行

devtool:'cheap-module-eval-source-map',
建议
// development:'cheap-module-eval-source-map'
// production:'cheap-module-source-map'

按需导入js

等需要的时候异步加载 js 需要安装 插件

cnpm install @babel/plugin-syntax-dynamic-import -D

配置 babelrc plugins

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins":["@babel/plugin-syntax-dynamic-import"]

}

在js使用

function getComponent(){
    return import(/* webpackChunkName:"jquery" */'jquery').then(({default:$})=>{
       return $;
    })
}
getComponent().then($=>{
    var el = $("<div>你好jquery</div>");
    $("body").append(el);
    el.click(()=>{
        alert("你好");
    })

})

也可以这么写

import('jquery')
.then(({default:$})=>{
    var el = $("<div>你好jquery</div>");
    $("body").append(el);
    el.click(()=>{
        alert("你好");
    })

})  

Prefetch

Prefetch是告诉浏览器这是一个在未来可能使用到的资源。 浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求

import时增加一条魔法注释即可：

 document.body.onclick=()=>getJq();
 function getJq(){
    import( /* webpackChunkName:"jquery", webpackPrefetch: true  */ 'jquery').then(({default:$})=>{

        $("div").click(()=>{
            alert("你好");
        })
    })
 }

环境变量

module.exports = （env）=>{
    if(env&&env.production){
        return merge(commonConfig,prod)
    }else{
        return merge(commonConfig,devConfig)
    }

}

build:"webpack --env.production --config ./build/webpack.config.comom.js"

Entry 与Output的配置

entry:'./src/index.js'

entry:{
    main:'./src/index.js',
    sub:'./src/index.js'
},
output:{
    publicPath:'http://www.js.com',
    // 配置根目录 默认是/ 可以配成相对目录./
    filename:'[name][hash].[ext ]'
    path:path.resolove(__dirname,'dist')
}

tree shaking

按需导入内容（摇树）
比如模块里面有个 a,b 两个模块，你只使用一个a 那么就导入a

webpack.config.js 配置

plugins:[
    optimization:{
        usedExports:true
    }
]

package.json 配置 // 忽略掉css 按需导入。

"name":"lesson"
"sideEffects":["@babel/polly-fill","*.css"],
"sideEffects":false,