01.ElementUI 2.X 源码学习:项目初始化和webpack配置

2,466 阅读3分钟

0x00.项目初始化

由于整个过程像素级 copy element,所以将不使用vue-cli初始化项目。

创建项目

新建一个空的文件夹,使用npm init 来初始化项目,并安装vue模块。

npm init -y   // -y直接生成的黑默认的package.json
npm i vue --save-dev

修改目录结构

根目录中添加以下文件夹:

  • build: 存放打包工具的配置文件。
  • examples:存放组件示例。
  • packages:存放组件源码,也是之后源码分析的主要目标。
  • src:存放入口文件以及各种辅助文件。
  • test:存放单元测试文件
  • public: 模板信息

根目录下创建项目配置文件: .gitignore README.md
public目录下,创建模板页文件: favicon.ico index.html
examples目录下,创建示例入口文件: App.vue main.js logo.png

0x01.wepack安装与配置

项目使用webpack实现模块化管理和打包。

局部安装webpack

npm install webpack --save-dev
./node_modules/.bin/webpack -h  // 检查安装是否成功

webpack-cli最新为4.X版本,webpack-dev-server无法正常运行,安装时需要指定版本(确保两模块版本皆为3.X)。

npm i webpack-cli@3.3.12 --save-dev
npm i webpack-dev-server@3.11.2--save-dev  

webpack-cli 提供了许多命令来使 webpack 的工作变得简单。官方文档
webpack-dev-server为你提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能。官方文档

安装 webpack loaders

webpack 使用 loader 对文件进行预处理。可以构建包括 JavaScript 在内的任何静态资源。
官方插件列表
webpack 插件中文文档

npm install vue-loader vue-template-compiler --save-dev // vue组件处理
npm install url-loader file-loader html-loader --save-devl //文件处理
npm install style-loader css-loader --save-devl //样式处理
npm install html-webpack-plugin --save-dev //生成一个html文件 

参考
vue-loader详解: segmentfault.com/a/119000002…
html-webpack-plugin详解:www.cnblogs.com/wonyun/p/60…

webpack配置

build目录下创建webpack配置文件webpack.config.js,提供入口(entry)模式(Mode)输出(output)模块(Module)插件(Plugins)开发服务器(DevServer)等配置选项。官方文档

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: process.env.NODE_ENV,
    entry: "./examples/main.js",
    output: {
        path: path.resolve(process.cwd(), "dist"),
        filename: "bundle.js",
    },
    devServer: {
        contentBase: './dist',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        preserveWhitespace: false
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            esModule: false  //“[object Module]”问题
                        },
                    },
                ],
            }
        ],
    },
    plugins: [new VueLoaderPlugin(), new HtmlWebpackPlugin({
        title: 'Development',
        favicon: './public/favicon.ico',
        template: 'public/index.html', 
        filename: 'index.html',
        inject: true,
    }),],
};

0x02.项目运行

npm scripts 配置

在npm脚本中新增webpack命令,执行的命令会自动去node_modules寻找,不用加上目录。

修改package.json配置

.
...
"scripts": { 
    "build:dist": "webpack --config  build/webpack.config.js",
    "dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.

cross-env配置

cross-env是一款运行跨平台设置和使用环境变量的脚本,不同平台使用唯一指令,无需担心跨平台问题。

npm i cross-env --save-dev 

修改package.json配置

{
    "scripts": { 
        "build:dist": "cross-env NODE_ENV=development webpack --config  build/webpack.config.js",
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
    },
}

运行测试

命令行窗口中,在该项目根目录下输入npm run dev 即可进行本地开发调试。

微信截图_20210414165142.png

成功运行后,项目第一个页面结果如下:

微信截图_20210414165237.png

最终目录结构

carbon (19).png

0x03.示例代码

Github Repo

0x04.链接汇总

点击以下链接,可以快速查看本系列其他文章:

ElementUI 2.X 源码学习:从零开始搭建Vue组件库汇总

专栏/ElementUI 2.X 源码学习