webpack 配置(1) - 基础

一直以来，我对webpack充满了恐惧，很多时候我看到webpack的一些配置就慌张，每次自己弄又都是充满了bug,直到我学到拉勾的教程，一瞬间，豁然开朗。我终于明白了webpack的很多东西的意思，也知道他其实他的配置需要我们自己思考里面的逻辑。现在我已经能自己手动配置出一个基本的环境了。本文开始，我要对到目前为止使用的webpack进行一个总结，以后直接从这里抄代码就可以了。

让项目跑起来

• 项目初始化

yarn init

• 本地安装webpack 为什么要本地安装？因为我们不能保证对方的webpack的版本，如果你的是5，他的是4，就会各种报错，所以一律本地安装，npm遇到webpack命令，会先找本地是否有webpack，没有再去找全局的。所以对于项目我们只需要本地安装就好

yarn add webpack -D
yarn add webpack-cli -D

• 配置webpack的配置项 在根目录下创建webpack.config.js文件

const path = require('path'); //用node的path方法，找到路径

module.exports = {
    mode:'development',
    entry: './src/index.js', //webpack入口
    output: { //webpack的打包完成之后的输出文件
        path:path.resolve(__dirname,'build'), //输出文件的目录
        filename: "js/[name].[contenthash:8].js" //输出的文件名称
    }
}

• 运行webpack 此时在命令行运行npx webpack，就会自动去寻找webpack.config.js文件，并且根据配置进行打包，生成对应的js文件。此时还只能输出js文件。其他不认识。

html-webpack-plugin （增加HTML模板）

此时要用到插件，代码如下:

yarn add html-webpack-plugin -D 

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入htmlWebpackplugin包

module.exports = {
    ...
    plugins:[
        ...
        new HtmlWebpackPlugin({
            template: "./public/index.html" //模板文件自己选，自己写
        })
    ]
}

clean-webpack-plugin （增加删除原先build文件的插件）

每次build都会生成新的文件，但是有些文件在前几次生成的时候就会产生，但是一直没删除，不方便，所以加上这个插件，一般也会跟html-webpack-plugin联用

yarn add clean-webpack-plugin -D

webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    ...
    plugins:[
        //一般放在最前面
        new CleanWebpackPlugin(),
        ...
    ]
}

copy-webpack-plugin（复制public文件夹的内容）

一般会把网页的icon图片等放在public文件中，所以需要一个复制插件

yarn add copy-webpack-plugin -D

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    ...
    plugins:[
        ...
        new CopyWebpackPlugin({ 
            patterns: [ { 
                from: path.resolve(__dirname, '../public'), 
                to: path.resolve(__dirname, '../dist') } 
            ] })
    ]
}

这个插件有个坑，如果plubilc中含有跟打包文件相同文件名的文件，诸如index.html,则会产生写入冲突，此时需要额外配置ignore。这是最终的配置

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

new CopyWebpackPlugin({
    patterns:[
        {
            from:path.resolve(__dirname,'./public'),
            to:path.resolve(__dirname,'./build'),
            globOptions:{
                ignore:[
                    '**/index.html'
                ]
            }
        }
    ]
})

总结

以上，就是对原生js + html的打包，我们可以打开打包生成之后的Build，查看生成的文件。但是还是有缺陷，比如css无法解决，还有我们想打包完成后自己打开文件（以及热更新）...等等，我们还有很长的路要走。 这是到目前为止的所有配置代码，到时候直接抄

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path');

module.exports = {
    mode:'development',
    entry: './src/index.js', //webpack入口
    output: {
        path:path.resolve(__dirname,'build'),
        filename: "[name].[contenthash:8].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new CopyWebpackPlugin({
            patterns:[
                {
                    from:path.resolve(__dirname,'./public'),
                    to:path.resolve(__dirname,'./build'),
                    globOptions:{
                        ignore:[
                            '**/index.html'
                        ]
                    }
                }
            ]
        })
    ]
}

pack.json

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "author": "xiaoznz",
  "license": "MIT",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^9.0.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.61.0",
    "webpack-cli": "^4.9.1"
  }
}