随着前端工程化的越来越疯狂,不会点webpack的前端真的吃不香,睡不着。

所谓webpack就是一个现代 JavaScript 应用程序的静态模块打包器。

开胃菜

吃饭前先来一道开胃菜,看完这遍文章你会学到什么?

  • 了解什么是webpack
  • 知道怎么去打包静态资源
  • 知道几个(entrt,output,module,plugins等)核心的配置作用
  • 不用vue-cli,从0到1跑起自己的vue项目
  • 不用create-react-app,从0到1跑起自己的react项目
  • 搭建一个既能跑vue项目也能跑react项目的配置

以上这些都是你将会学到的。

温馨提示:建议跟着一起敲,这会加深你对每一个知识的理解和固定; 还有内容有点多,需要你静下心来慢慢的品尝,你会收获到你意想不到的知识。

入门webpack

1.1初始化项目

先我们先在自己舒服的地方创建一个文件夹,文件夹里面初始化项目。

    mkdir myWebpackPro
    npm init -y
复制代码

然后我们安装webpack webpack-cli 到项目

npm i webpack webpack-cli -D
复制代码

你也可以用cnpm 或者yarn 来安装

cnpm i webpack webpack-cli -D / yarn add webpack webpack-cli -D
复制代码

接着我们在myWebpack文件夹创建一个src文件夹,在里面创建一个index.js文件(这个将来将是我们的入口文件)。

mkdir src
cd src
touch index.js
复制代码

最后我们在与src同级创建一个webpack.config.js(配置webpack的文件)文件

touch webpack.config.js
复制代码

最终的目录结构是这样的

到此为止,我们初始化项目就完成了。

1.2测试webpack能否正常打包

首先,我们在index.js里面随便**console.log()**一句

然后到package.jsonscript下配置一下build命令,先删除默认的test命令,再添加build命令:

"build":"webpack ./src/index.js"
复制代码

最后我们再终端执行npm run build命令

npm run build
复制代码

如果执行成功的话在根目录会多一个dist文件夹里面会有一个main.js

让我们打开main.js看看有没有把我们刚刚console.log()的那句话打包进去。

现在让我们真正进入webpack配置。

1.3更改webpack的入口和默认打包的文件名

首先,我们打开webpack.config.js配置一下entryoutput

我们在顶层引进path模块,这是node内置的一个模块,无需单独安装,是用来出来文件路径的一个模块。我们的打包入口(entry)依旧是刚刚创建的那个index.js文件,出口(output)也就是打包成功后,输出的位置(path)和文件名(filename),我们输出的位置依旧选择了dist文件下,但是输出的文件名,我们该为了index.js(之后我们会将文件名改为动态的)

配置完这些后,我们到package.json改一下打包路径,将之前的./src/index.js改为./webpack.config.js

我们npm run build之后依旧能打包成功。

输出的文件名也变成了index.js,现在你会看到dist目录下还有个main.js,是不是感到很奇怪?不用奇怪,这是我们上一次打包余留下来的,等下我们将来说如何解决上一次打包余留下来的文件。

1.4新建一个index.html模版

首先,我们在src下新建一个跑public文件夹,然后在里面新建一个index.html模版(用于我们查看打包的js文件,之后再用于我们vue或者react项目的唯一html渲染模版)

cd src
mkdir public 
touch index.html
复制代码

新建完之后我们将刚才打包好的js引进去看看,浏览器有没有打印出我们console.log()。

但是,当我们将outputfilename改成动态之后,每次打包输出的文件名都不一样,那么我们每一次打包都要重新引用一次,这样特别麻烦。

1.5html-webpack-plugin

为了解决上面说的那个问题,我们需要安装一下html-webpack-plugin插件。

npm run html-webpack-plugin -D
复制代码

安装完之后我们在webpack.config.js配置一下plugins

这里我们配置了html-webpack-plugin,也把输入文件名改为了动态的了([name].[hash:8].js)。

我们再npm run build,然后你会看到再dist下多一个index.html。接着打开它,发现控制台输出的跟我们console.log()的值一致就对了。(记得在打包前,把之前在index.html手机引进的script标签去掉,不如打包会在控制台会报一个找不到文件名的错)

接下来,我们来解决,打包后自动清除之前打包的代码。

1.6 clean-webpack-plugin

现在你打开dist好很多冗余的js文件,每次手动清除的话会非常烦躁。那我们就让webpack来帮我们做。

首先,安装clean-webpack-plugin

npm i clean-webpack-plugin -D
复制代码

安装完之后,我们再配置一下plugins选项。

注意⚠️:CleanWebpackPlugin是具名导出。

最后,我们在npm run build一下,看看dist目录下还有没有多余的js文件。

soga,干净。

那么,现在问题又来,我们每次改动一点js代码都要重新手动去打包一次,这样真炒鸡麻烦啊,那有没有自动打包的方法呢?那么答案来咯,当然是有的。下面我们解决这个问题。

1.7 热更新

现在我们来解决自动打包的问题。首先,我们安装一下webpack-dec-server,配合webpack内置的HotModuleReplacementPlugin插件来完成热更新。

npm i webpack-dev-server -D
复制代码

HotModuleReplacementPlugin不用手动下载,webpack内置。

安装完之后,我们先来配置一下webpack.config.js文件

配置完webpack.config.js,我们的package.json添加一条打包命令

配置完后,我们现在用npm run dev命令打包,然后我们回去更新我们index.js文件的任何东西,保存之后都会自动更新。

好了,现在基础功能,我们搭建得差不多了。接下我们配置module,继续完善最后的基础功能,比如打包js,css,image

1.8 打包js文件

打包js文件,主要是要将es6,7...的语法转义成es5的语法,让不兼容es6,7...语法的浏览器也能使用。

首先我们先安装一套包babel-loader,@babel/core,@babel/preset-env,@babel/polyfill

npm i babel-loader @babel/core @babel/preset-env @babel/polyfill -D
复制代码

安装完之后,我们来配置webpack.config.jsmodule

这里简单介绍一下,每个loader的作用,babel-laoder主要是打包js文件,而babel-loader又依赖@babel/core,@babel/preset-env可以转义es6的map,every,fifler,some...语法,但是不转义Promise,async,await...语法,所以要用@babel/polyfill来转义。

1.9 打包css文件

首先安装几个loader,style-loader,css-loader

npm i style-loader css-loader -D
复制代码

安装完,我们接着配置module

这里只是简单配置css文件,可能有些项目还会用到less,scss等,这里就不过多阐述,如果你项目用到可以到官方找一下对应的loader配置一下,都是大同小异。

2.0 打包image,font,media文件

首先还是先安装几个loader,url-laoder,file-loader

npm i url-loader file-loader -D
复制代码

安装完,我们继续配置module

介绍一下这两个loader的配置,配置里我们指定了limit,如果文件没有大于这个就用url-loader,base64打包,如果大过这个值,就会用file-loader打包,同时会按options下配置的name输出到对应的位置。

好,基础配置就说那么多了,如果你的项目还有其他的需求可以到官网撸一番。

最终配置如下:


const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

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

const webpack = require('webpack')

const config = {

    entry: ['@babel/polyfill', path.resolve(__dirname, './src/index.js')],

    output: {

        filename: '[name].[hash:8].js',

        path: path.resolve(__dirname, './dist')

    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_module/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            fallback: {
                                loader: 'file-loader',
                                options: {
                                    name: 'img/[name].[hash:8].[ext]'
                                }
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            fallback: {
                                loader: 'file-loader',
                                options: {
                                    name: 'media/[name].[hash:8].[ext]'
                                }
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            fallback: {
                                loader: 'file-loader',
                                options: {
                                    name: 'fonts/[name].[hash:8].[ext]'
                                }
                            }
                        }
                    }
                ]
            }
        ]
    },

    devServer: {
        port: '3000',
        host: '127.0.0.1',
        hot: true,
        open: true
    },

    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: path.resolve(__dirname, './src/public/index.html')
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]

}

module.exports = config
复制代码

从0到1跑起Vue项目

当你以上的基础部分都熟悉了,我们从0到1搭建一个vue环境是soeasy的事。明人不说暗话,其实上面的基础部分一直在为跑起vue项目做铺垫。

现在我们要跑起vue项目,在以上基础的配置上,在搞几个loader就完事了,简单得我都不好意思往下说了。

好了,现在我们先来安装几个东西,vue,vue-loader,vue-template-compiler,vuw-style-loader

npm i vue vue-loader vue-template-compiler vue-style-loader -D
复制代码

安装完之后,我们来配置一下weback.config.js

这是module配置,记得在顶层导入VueLoaderPlugin

这是plugins配置

配置完webpack.config.js之后,我们来在src下创建一个vue文件夹,然后在里面创建一个app.vue文件

cd src
mkdir vue
cd vue
touch App.vue
复制代码

目录

接着在app.vue中,学上你熟悉的vue语法。

写好之后,我们回到入口文件也是src下的index,js,我们来重新写一下里面的逻辑,之前只是console.log()一下,什么也没做。

最后我们的index.js文件是这样的。

这段代码对于用vue的同学再也熟悉不过来。

接着,我们回到src下的public下的index.html加一个根元素加上一个idroot

最后,我们npm run dev一下,我们的vue项目就跑起来了。

从0到1跑起React项目

我们搭建React项目的配置,还是重基础配置上面配置。跑起react项目的配置比vue还要简单。

首先,我们先安装一些东西。react,react-dom,@babel/preset-react

npm i react react-dom @babel/preset-react -D
复制代码

安装完后,我们配置一下webpack.config.js

它只需要配置一下module下的js项就ok了。

接着,我们去写一下入口文件(index.js)的逻辑。

这段代码对用react的同学也是熟悉不过的了。

index.html文件也根vue写的一样。

最后,我们npm run dev一下,我们的react项目的跑起来了。

到这里,我们自己搭建Vue项目环境配置和React项目环境配置都说完了。

那么我们怎么可以把Vue环境跟React环境统一在放下同一个环境下,在我们学Vue的时候用Vue环境,在我们写React的时候用React环境,这是我们接下要做的。

一套配置,两套环境,既可跑Vue,也可跑React

我们回头观察一下Vue的配置跟React的配置有哪里不一致,哪里是一致的。

同:

entry,output

image,font,media打包

devServer和部分Plugin

不同的有:

  • js的loader配置,vue没有@babel/preset-ract
  • css的loader的配置,vue用的是vue-style-loader,react用的是style-loader
  • vue的loader,react配置没有
  • plugin,vue多了一个VueLoaderPlugin,react没有

好了,现在我们找出它们的异同之处了,那就好办了。

我们需要用一个叫webapck-merge的插件,我们安装一下。

npm i webpack-merge -D
复制代码

安装完之后,我们在webapck.config.js同级目录下新建两个文件webpack.vue.js,webpack.react.js,来放它们两者不同的配置。

touch webpack.vue.js
touch webpack.react.js
复制代码

接着我们来写一下它们的不同配置。

webpack.vue.js

const merge = require('webpack-merge')

const webpackConfig = require('./webpack.config')

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

const config = {
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:['vue-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_module/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}

module.exports = merge(webpackConfig,config)
复制代码

webpack.react.js

const merge = require('webpack-merge')

const webpackConfig = require('./webpack.config')

const config = {
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_module/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ['@babel/preset-react','@babel/preset-env']
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
        ]
    }
}

module.exports = merge(webpackConfig,config)

复制代码

最后webpack.config.js就成这样了。


const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

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

const webpack = require('webpack')

const config = {

    entry: ['@babel/polyfill', path.resolve(__dirname, './src/index.js')],

    output: {

        filename: '[name].[hash:8].js',

        path: path.resolve(__dirname, './dist')

    },

    module: {
        rules: [      
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            fallback: {
                                loader: 'file-loader',
                                options: {
                                    name: 'img/[name].[hash:8].[ext]'
                                }
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            fallback: {
                                loader: 'file-loader',
                                options: {
                                    name: 'media/[name].[hash:8].[ext]'
                                }
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            fallback: {
                                loader: 'file-loader',
                                options: {
                                    name: 'fonts/[name].[hash:8].[ext]'
                                }
                            }
                        }
                    }
                ]
            }
        ]
    },

    devServer: {
        port: '3000',
        host: '127.0.0.1',
        hot: true,
        open: true
    },

    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: path.resolve(__dirname, './src/public/index.html')
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ]

}

module.exports = config
复制代码

好了,现在我们把它们的配置拆分完毕了,还剩最后一步我们就大功告成了,那就是在package.json添加两条命令。

在我们写vue项目的时候,我们就用npm run vue,在写react项目的时候,我们就用npm run react

结尾

好了,到现在为止,我们把从基础配置到vue到react再到合并两套环境都做完了。原创不易,希望这篇文章能帮助到你。如果有不到位,欢迎在下面留言;如果把你看得睡着过去的,欢迎来找我,我给你暖被窝,哈哈哈;如果有把你说蒙的了或者还不明白的,欢迎来找我,我把我的剩余的两个口罩送一半给你。