【Webpack基础】Webpack4 常用依赖及配置

1. Webpack 依赖

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/plugin-transform-runtime": "^7.18.2",
    "@babel/polyfill": "7.12.1",
    "@babel/preset-env": "7.12.11",
    "@babel/preset-react": "^7.17.12",
    "@babel/runtime": "^7.18.3",
    "@babel/runtime-corejs3": "^7.18.3",
    "autoprefixer": "9.5.1",
    "babel-loader": "8.2.2",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "3.8.3",
    "css-loader": "2.1.1",
    "ejs": "3.1.5",
    "ejs-loader": "0.3.3",
    "file-loader": "^3.0.1",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "postcss-loader": "3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "10.0.0",
    "style-loader": "^1",
    "uglifyjs-webpack-plugin": "2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.11.2"
  }
}

备注：

1. vue@2.6.14 -> vue-loader@15.9.8 vue-template-compiler@2.6.14 (默认)

   const VueLoaderPlugin = require('vue-loader/lib/plugin')

2. vue@3.2.0 -> vue-loader@16.2.0 @vue/compiler-sfc@3.2.37

   const { VueLoaderPlugin } = require('vue-loader')

2. Webpack 配置

const { resolve } = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
    // 模式： 开发  生产
    mode: 'development', // development production 
    // source-map 方便调试 提示源代码错误位置
    devtool: 'cheap-module-eval-source-map', // 开发环境：cheap-module-eval-source-map  线上环境：cheap-module-source-map
    // 优化 禁止压缩 最小化  配合 source-map 
    optimization: {
        minimize: false
    },
    // 入口文件  多文件入口
    entry: {
        index: resolve(__dirname, './src/js/index.js'),
        detail: resolve(__dirname, './src/js/detail.js' ),
        collections: resolve(__dirname, './src/js/collections.js')
    },
    // 输出/打包设置
    output: {
        // 打包路径
        path: resolve(__dirname, './dist'),
        // 打包后的文件名
        filename: 'js/[name].js'
    },
    // 模块设置
    module: {
        // 模块的匹配规则
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: resolve(__dirname, 'node_modules')
            },
            {
                // 处理 tpl 结尾的文件
                test: /\.tpl$/,
                loader: 'ejs-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [autoprefixer('last 5 versions')];
                            }
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [autoprefixer('last 5 versions')];
                            }
                        }
                    },
                    "sass-loader"
                ],
            },
            {
                test: /\.(png|jpg|jpeg|gif|ico)$/i,
                loader: 'url-loader?limit=1024&name=img/[name]-[hash:16].[ext]'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)/,
                loader: 'file-loader'
            }
        ]
    },
    // 插件配置
    plugins: [
        new uglify(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: resolve(__dirname, 'src/index.html'),
            title: '新闻头条',
            chunksSortMode: 'manual', // 手动引入模块
            chunks: ['index'], // 模块引入顺序 
            excludeChunks: ['node_modules'], // 排除模块文件
            hash: true, // 防缓存
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'detail.html',
            template: resolve(__dirname, 'src/detail.html'),
            title: '新闻详情',
            chunksSortMode: 'manual',
            chunks: ['detail'],
            excludeChunks: ['node_modules'],
            hash: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'collections.html',
            template: resolve(__dirname, 'src/collections.html'),
            title: '我的新闻',
            chunksSortMode: 'manual',
            chunks: ['collections'],
            excludeChunks: ['node_modules'],
            hash: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }
        }),
    ],
    // 开发服务器的配置
    devServer: {
        watchOptions: {
            ignored: /node_modules/ 
        },
        open: true,
        host: 'localhost',
        port: 3000
    }
}