大话webpack-从零搭建

司_尘
406 阅读2分钟

前言

最近应脚手架搭建，工程打包是基于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() 
    ]
}

总结

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

avatar
文章
阅读
粉丝

友情链接：