Skip to content

Files

Latest commit

77099a3 · Jul 21, 2022

History

History

step00

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Apr 14, 2021
Apr 14, 2021
Apr 14, 2021
Apr 14, 2021
Jul 21, 2022
Apr 14, 2021

README.md

项目初始化和 webpack 配置

blog.png

原文地址: https://juejin.cn/post/6950905030635421710

项目初始化

创建项目

新建一个空的文件夹,使用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

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 详解: https://segmentfault.com/a/1190000020629508
html-webpack-plugin 详解:https://www.cnblogs.com/wonyun/p/6030090.html

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,
    }),
  ],
};

项目运行

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