webpack探寻之路

webpack探寻之路

准备工作： 全局安装webpack-cli 和webpack

1、核心概念

		entry，output，loader，plugin，mode

const {
    resolve
} = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    //  loader 配置
    module: {
    },
    plugins: [],
    mode: 'development'
}

2、打包样式资源

编译loader中use从右向左的顺序编译，类似栈操作的顺序（先进后出）

// 以sass为例
cnpm install node-sass  sass-loader -D

		rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }]

3、打包html资源

HtmlWebpackPlugin会将template中的html打包进build目录，并自动添加script、link等标签去引入对应资源。

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

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

4、打包图片资源

			// 问题： url-loader默认使用es6模块化解析，而html-loader引入图片是common.js
            // 解决： 关闭url-loader的es6模块化，使用commonjs解析
            {
                // 处理不了html中的图片 <img>标签
                test: /\.(jpg|png|gif)$/,
                // 下载url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优点： 减少请求数量
                    // 缺点： 图片体积更大
                    limit: 8 * 1024,
                    esModule: false
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }

5、打包其他资源

打包除了html，css，js文件以外的资源，使用file-loader

{
	exclude: /\.(css|js|html)$/,
	loader: 'file-loader'
}

6、devServer

	// 开发服务器devserver
    // 特点： 没有输出，在内存中打包
    // 启动指令：npx  webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        port: 3000
    }

7、css提取成单独文件

用minicssextractplugin.loader替代style-loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
			{
                test: /\.scss$/,
                // MiniCssExtractPlugin 取代 stye-loader
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
            
            

new MiniCssExtractPlugin({
	            filename: 'css/built.css'
	        })

8、css样式兼容性处理

使用postcss-loader和autoprefixer

npm i postcss-loader autoprefixer -D

在项目目录下创建postcss.config.js, 内容如下：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

在webpack.config.js中,在css-loader和sass-loader中加上postcss-loader：

use: ['style-loader',  'css-loader', 'postcss-loader', 'sass-loader']

9、其他优化

项目大了自然会出现一些性能问题，webpack提供了happyPack、thread-loader、tree-shaking等等一些技术进行优化，详细可以查看官方文档。