webpack的基本使用

概念

webpack概念请移步阅读官网

loader解析不同文件类型

解析txt

module: {
  rules: [
    {
      test: /\.txt$/, 
      use: 'raw-loader'
    }
}

解析es6和react jsx

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader'
    },
}

babel的配置⽂件是：.babelrc，需要安装的依赖如下

• @babel/core
• @babel/preset-env
• babel-loader

支持react react-dom，需要安装的依赖如下

• react
• react-dom
• @babel/preset-react

// .babelrc文件
{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ]
}

解析css、less

• css-loader ⽤于加载 .css ⽂件，并且转换成 commonjs 对象
• style-loader 将样式通过 <style>标签插⼊到 head 中

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

解析图片和字体

• url-loader内部也是由file-loader实现的，不超过limit限制的大小，会将其转化为base64格式

module: {
  rules: [
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10240,
          }
        }
      ]
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader']
    }
  ]
}

文件指纹策略

• Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改
• Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash值
• Contenthash：根据⽂件内容来定义 hash ，⽂件内容不变，则 contenthash 不变

那为什么要使用文件指纹策略呢？我认为最重要的是缓存，通过文件指纹可以判断文件是否被修改，如果文件没有被修改，则可以使用浏览器缓存。

分析了原因，那就需要根据实际情况选择选择不同的文件策略

• 多页面应用的情境下，不能因为A页面的js发生了改变，而导致B页面的js也要跟着改变。所以使用chunkhash比较合适
• 只有js修改的情况下，css没有进行修改，那么css文件使用contenthash是比较合适的（css需要抽离出来）

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8][ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })  
    ]
};

压缩文件

css、html、js压缩

• css使用插件optimize-css-assets-webpack-plugin进行压缩
• html使用html-webpack-plugin压缩
• mode为production时，内置了 uglifyjs-webpack-plugin，js会自行压缩

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8][ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        // 需要设置模板html，打包后会将bundle文件注入html中
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: 'index.html',
            chunks: ['index'],
            inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/search.html'),
            filename: 'search.html',
            chunks: ['search'],
            inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        })  
    ]
};

为方便打包，使用clean-webpack-plugin自动清理构建目录，默认会删除 output 指定的输出⽬录

····
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
	 // 略
	 output: {
	    path: path.join(__dirname, './dist'),
	    filename: '[name].[chunkhash:8].js'
  	},
	plugins: [
	 	new CleanWebpackPlugin(),
	]
	// 略
}

热更新

1. 安装webpack-dev-server
2. package.json文件中添加命令行，”dev": “webpack-dev-server --open”
3. webpack.dev.js中添加如下代码

devServer: {
    contentBase: './dist',
    hot: true
}