浅析Webpack5搭建基本项目

qiuadam
565 阅读2分钟

一. 搭建项目

 npm init
 npm i -D webpack webpack-cli

创建dist，src，public文件夹。随后在src文件夹里面添加一个index.js文件,在public文件夹下面添加一个index.html,内容如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue-cli-webpack</title>
  </head>
  <body>
    <noscript>需要运行在vue环境中</noscript>
    <div id="app"></div>
  </body>
</html>

之后在项目根目录添加一个webpack.config.js文件，内容如下:

const path = require('path')
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  devtool: "inline-source-map",
  output : {
      path : path.resolve(__dirname, "dist"),
      filename: "[name].[contenthash].js",
      clean : true
  },
  module: {
      rules : []
  },
  plugins : []
}

二.配置模板（HtmlWebpackPlugin）

   npm i html-webpack-plugin -D

webpack.config.js引入plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    ...,
    plugins : [
        new HtmlWebpackPlugin({
          template: "./public/index.html",
          vue: "single-spa",
        }),
    ]
}

index.html添加title

<title><%= htmlWebpackPlugin.options.title %></title>

三.配置less css style

    npm i style-loader css-loader less less-loader -D

配置loader loader解析过程都是从右到左，所以需要借助css-loader整合css,然后在让style-loader挂载到head标签中

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

四.配置css 浏览器前缀

   npm i postcss-loader autoprefixer -D

需要在项目根目录建立一个postcss.config.js文件，内容如下:

// postcss.config.js
// 需要配置这个插件信息
module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        })
    ]
};

之后在webpack.config.js引入

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

五.CSS打包分离

将css提取为独立的文件

    npm i --save-dev mini-css-extract-plugin

配置webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    module : {
        rules : [
            {
                test : /\.css$/,
                use : [MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
            },
            {
                test : /\.less$/i,
                uae : [MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']
            }
        ]
    },
    plugins : [
        ...,
        new MiniCssExtractPlugin({ 
            filename: '[name].[hash:8].css' 
        }),
    ]
}

六.CSS压缩

    npm install css-minimizer-webpack-plugin --save-dev

webpack.config.js配置

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
    ...,
    plugins : [
        ...,
        new CssMinimizerWebpackPlugin()
    ]
}

七.打包文件

webpack.config.js配置

module.exports = {
    module : {
        rules : [
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                type: "asset/resource",
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                geneator : {
                    filename: 'fonts/[hash][ext][query]'
                }
            },
        ]
    }
}

八.配置babel

    npm i @babel/core @babel/preset-env babel-loader -D

webpack.config.js配置

module.exports = {
    ...,
    modules : {
        rules : [
            {
                test : /\.js$/,
                use : {
                    loader : 'babel-loader',
                    options : {
                        presets : ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

九.配置devServer

    npm i -D webpack-dev-server

webpack.config.js配置

module.exports = {
  devServer: {
    port: 9000,
    hot: true,
    open: true,
  },
}

在package.json添加命令

"scripts":{
    "dev" : "webpack serve"
}

十.配置alias

webpack.config.js配置

module.exports = {
    ...,
    resolve : {
        alias : {
            '@' : path.resolve(__dirname,'src')
        }
    }
}

十一.配置ts

    npm i typescript ts-loader -D

webpack.config.js配置

module.exports = {
    module : {
        rules : [
            {
                test : /\.ts/$,
                use : 'ts-loader'
            }
        ]
    }
}

十二.配置SourceMap

webpack.config.js配置

module.exports = {
    devtool: 'inline-source-map',
}

十三.配置jsx（可选）

    npm i --save-dev babel-register jsxobj babel-preset-es2015

在项目根目录新建.babelrc文件，内容如下:

{
  "presets": ["es2015"]
}

十四.配置打包进度条(可选)

    npm i -D progress-bar-webpack-plugin chalk

webpack.config.js配置如下:

const chalk = require("chalk");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
module.exports = {
  plugins: [
    // 进度条
    new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(":percent")} (:elapsed s)`,
    }),
  ],
};

关于剩下的就是一些优化配置 单独放到另外一篇去介绍

avatar
文章
阅读
粉丝