「大话webpack」从零搭建

前言

最近应脚手架搭建，工程打包是基于webpack来操作，以前在学习Vue的时候也是用到的他虽然大致明白工作流程以及原理，但是这种东西实操一遍收获那是杠杠的呀，比起看文章啥的那理解一下就上来了，小编就在此分享一下从零搭建一个webpack项目。

开始大话

---

何为webpack？

概念

JavaScript 应用程序的静态模块打包器，应官网的一句话而言打包所有资源、脚本、样式、图片，将我们复杂的工程目录文件打包成一个轻量级的几个简略文件。

webpack核心

• 入口文件配置 (enpty)

• 出口文件配置 (output)

• 模块转换器 (loader)

• 插件 (plugins)

---

构建项目

一、初始化项目

那么依据小编自身的流程我们创建 webpack-project 文件，安装webpack插件

mkdir webpack-project
cd webpack-project
// 初始化文件
npm init
npm install webpack webpack-cli -D

我们先新建一下所需要的文件，下面是文件结构

├── public
    └── index.html 
├── src
    └──index.js   // 入口文件
├──.babelrc
├──package.json
├──webpack.config.js // 

我们先准备一下启动命令，process.env 中默认并没有 NODE_ENV，这里配置下我们的 package.json 的 scripts,先安装一下cross-env。
npm install cross-env -D
在配置一下package.json中的scripts

// package.json
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack"
},

二、转义JS

转义js也是webpack所要实现的，主要用于将ECMAScript2015+版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
我们安装以及配置一下 babel 依赖

npm install babel-loader -D
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3 -D

然后我们转到 webpack.config.js文件里面配置一下babel，节约空间我们也在这里配置一下入口出口文件

const path = require('path');
module.exports = {
    module: {
        entry: './src/index.js', //同样也是webpack的默认配置，设置可以是字符串可以是数组也可以是对象
        output: {
            path: path.resolve(__dirname, 'dist'), //必须是绝对路径
            filename: 'main.[hash:6].js',
        },
        rules: [
            {
                // babel搜寻文件目录下.js后缀文件转义
                test: /\.jsx?$/,
                use: ['babel-loader'],
                exclude: /node_modules/ //排除 node_modules 目录
            }
        ],
    }
}

同时我们配置一下 .babelrc文件，也是对babel依赖进行配置

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

这里我们在 src/main.js 中随意写一些东西，然后控制台使用npm run build，就可以看到我们的工程目录多了一个dist文件夹，那里面就是压缩包装好了的文件（ main.[hash:6]js 文件我是这样去随机命名的），我们可以从中找到 index.js中对应转义代码位置

至此我们实现了对入口js文件的转义以及打包命令的配置

三、mode 配置项

mode项就是告知webpack以怎样的模式去运行我们这边选择开发模式。我们加到 webpack.config.js文件中去

module.exports = {
    mode: "development",
    // ......
}

四、浏览器查看项目

浏览器中查看我们通过 html-webpack-plugin 插件实现，同时也安装一下 webpack-dev-server 那样我们的项目就可以在本地服务器上跑起来了

npm install html-webpack-plugin -D
npm install webpack-dev-server -D

我们找到 public/index.html 把html骨架调出来 !+tab (内容写不写无所谓不影响调试)。

修改 webpack.config.js 文件，引入该插件。webpack-dev-server也有几个比较关键的配置项

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            minify: {
                removeAttributeQuotes: false, //是否删除属性的双引号
                collapseWhitespace: false, //是否折叠空白
            },
        })
    ],
    devServer: {
        port: '8000', //默认是8080
        quiet: false, //默认不启用
        inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
        stats: "errors-only", //终端仅打印 error
        overlay: false, //默认不启用
        clientLogLevel: "silent", //日志等级
    }

}

我们到这一步 使用 npm run dev就可以通过浏览器在我们设置的端口中查看项目了，因为现在工程没有同步功能所以每一次修改都还是要重新build一下在启动，但是还要一个小问题就是我们可以看到代码出入信息位置是给的打包后的位置， 通过在webpack.config.js中定义实现devtool

module.exports = {
    devtool: 'cheap-module-eval-source-map' //开发环境下使用
}

这样我们输出代码就可以直接定位到原始代码位置

五、处理样式文件

那么页面、js文件我们都处理好了，那么怎么导入样式文件呢，webpack本身没有提供解析方法，所以我们还是借助插件，预处理语言肯定也是我们要考虑的 Less Sass

npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D

配置一下 webpack.config.js 文件

//webpack.config.js
module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: ['style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [
                                require('autoprefixer')({
                                    "overrideBrowserslist": [
                                        ">0.25%",
                                        "not dead"
                                    ]
                                })
                            ]
                        }
                    }
                }, 'less-loader'],
                exclude: /node_modules/
            }
        ]
    }
}

六、导入资源文件

本地资源导入在webpack中是不可以直接导入的，安装依赖

npm install url-loader -D
npm install file-loader -D

配置webpack.config.js 文件

//webpack.config.js
module.exports = {
    //...
    modules: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240, //限制一下图片大小，超过了的话就直接放到打包后资源目录下
                            esModule: false 
                            name: '[name]_[hash:6].[ext]',
                            outputPath: 'assets' // 静态资源打包后投放地
                        }
                    }
                ],
                exclude: /node_modules/
            }
        ]
    }
}

七、html中导入图片

逐渐调试熟练 小编就省略一些文字

npm install html-withimg-loader -D

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

我们可以在public/index.html中写入img标签导入试一下效果

八、打包前清空目录

npm install clean-webpack-plugin -D

//webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        //不需要传参数
        new CleanWebpackPlugin() 
    ]
}

完善搭建

一、静态资源调用

在主页中引入已有的静态资源文件，我们在public栏中放入js文件夹(用于存放已有的静态资源文件)，index文件直接引入，那可不会允许你这样。webpack：我都已经跟你把转义和输出都写好了，你还自己引入文件，我才不在帮你把外部文件再转义好加进来了呢，太麻烦我了？那只能再给他买上礼物(安装插件)，安抚一下了。

该插件我们实现将我们的静态资源目录拷贝到我们打包后的dist文件目录下，打包后就直接调用。

npm install copy-webpack-plugin -D

同样的引入之后我们配置一下webpack.config.js文件

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            {
                from: 'public/js/*.js',
                to: path.resolve(__dirname, 'dist', 'js'),
                flatten: true, // 该参数设置拷贝时不会把整个文件目录拷贝下来
            },
        ], {
            ignore: ['alone.js'] // 这边是筛选参数，写进去public下该文件不会被拷贝过去，可以没有需求可以不设置
        })
    ]
}

二、抽离CSS文件并压缩

我们知道没有抽离出来CSS文件打包，打包后样式实现是最后的js文件去实现，这样可以分担一下打包成的js文件的容量，同样的抽离出来的CSS文件我们也进行依稀压缩，导入插件

npm install mini-css-extract-plugin -D

再次配置一下webpack.config.js文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader, //替换之前的 style-loader
                    'css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('autoprefixer')({
                                        "overrideBrowserslist": [
                                            "defaults"
                                        ]
                                    })
                                ]
                            }
                        }
                    }, 'less-loader'
                ],
                exclude: /node_modules/
            }
        ]
    }
}

引入压缩插件

npm install optimize-css-assets-webpack-plugin -D

然后配置引用一下该插件

//webpack.config.js
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    plugins: [
        // 这边直接调用就好了不需要调配什么参数
        new OptimizeCssPlugin()
    ],
}

三、热更新

这是打包工具必备的一个功能，能让我们修改代码保存以后自动更新，webpack插件中包含此功能对象我们直接调用

//webpack.config.js
const webpack = require('webpack');
module.exports = {
    //....
    devServer: {
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //热更新插件
    ]
}

四、多界面应用打包

到目前为止页面的功能已经是基本完善，那么多页面webpack又是如何处理的呢？我们直接定义多个入口文件实现多页面打包，在配置页面的时候我们要加上chunks参数配置，要不然界面会将入口js文件都加载而没办法对应。

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:6].js'
    },
    //...
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: './public/login.html',
            filename: 'login.html', //打包后的文件名
            chunks: ['login']
        }),
    ]
}

总结

到这里我们的webpack工具项目就已经做到了转义、样式、资源导入以及存放基本雏形已经有了，后续学习会继续完善分享更多关于该webpack的完善