Webpack学习笔记(一)

webpack基本概念

entry

用于指定打包文件的入口

entry: './src/index.js'

output

指定输出的文件名即目录，一个对象

const path = require('path')
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
}

module

用于添加loader，loader可用于css预处理等工作

module:{
    rules:[

    ]
}

plugins

数组，plugin可用于指定html模板等工作

plugins:[

]

mode

指定webpack打包的模式，可选生产模式和开发模式

mode: 'development'/'production'

打包css文件

处理css需要两个loader，style-loader和css-loader。css-loader将css文件转化为commonJS模块，并引入，style-loader创建style标签，并将css插入。

//less文件的处理
{
    test: /\.less$/,
    use:[
        'style-loader',
        'css-loader',
        'less-loader'
    ]
}

webpack会反向使用loader，use内的loader要从后向前写。

使用mini-css-extract-plugin将css提取为单独文件

{
    test: /\.less$/,
    use:[
        miniCssExtractPugin.loader,
        'css-loader',
        'less-loader'
    ]
},

打包html文件

打包html需要借助html-webpack-plugin

new htmlWebpackPlugin({
    template: './src/index.html'
})

template指定html模板

打包图片

css/js文件内图片的打包

使用url-loader

{
    test: /\.(png|jpg)$/,
    use:[
        'url-loader'
    ],
    options:{
        limit: 1 * 1024
    }
}

options用来指定图片是否需要base64处理

html内的图片资源

使用html-loader处理图片

使用babel增强js兼容性

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options:{
        presets:['@babel/preset-env']
    }
}

• exclude用于排除文件夹（第三方库）
• options指定babel的预设

开启DevServer

devServer:{
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 3000
}

• contentBase指定目标路径（打包后输出路径）
• compress代码

HMR

针对devServer的热更新选项

devServer:{
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot: true
}

此时修改css文件并不会因此js重新加载

if(module.hot){
    module.hot.accept(str, function(){
        
    })
}

该方法对文件的更新进行某种拦截（原理暂不清楚），实现热更新。

sourcemap

用于对代码报错位置追踪

devtool: 'source-map'/'inline-source-map/'hidden-source-map'/'eval-source-map'

tree shaking

用于排除无意义的代码，在package.json加入如下代码防止排除css等文件

"sideEffects":["*.css"]

代码分割

分割node_modules代码

optimization: {
    splitChunks:{
        chunks: 'all'
    }
}

动态导入

import (filename).then(func)

懒加载

document.getElementById(id).onclick = function(){
    import(/* webpackChunkName: 'test', webpackPrefetch: true */filename).then(func)
}