webpack起步--Vue模块化打包js文件

1. 新建项目文件夹，并初始化：npm init -y(或：npm init --yes)2. 项目目录下安装webpack：npm install webpack@3.12.0 -D安装完成后，提示升级npm，根据提示命令进行了升级：To address issues that do not require attention, run:npm audit fixTo address all i

每一天，每一步

5478人浏览 · 2021-09-18 21:59:53

每一天，每一步 · 2021-09-18 21:59:53 发布

1. 新建项目文件夹，并初始化：

npm init -y
(或：npm init --yes)

2. 项目目录下安装webpack：

npm install webpack@3.12.0 -D

安装完成后，提示升级npm，根据提示命令进行了升级：


To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice
npm notice New minor version of npm available! 7.19.1 -> 7.24.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.24.0
npm notice Run npm install -g npm@7.24.0 to update!
npm notice

升级npm：

npm install -g npm@7.24.0

3. 项目根目录下新建index.html、main.js、App.js文件，书写一个简单的Vue实例，其中main.js为入口文件，App.js为App组件模块文件，将vue.js文件放入项目根目录下。目录结构如下：

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <!-- <script src="./vue.js"></script> -->
    <!-- build.js为webpack打包后的文件 -->
    <script src="./build.js"></script>
</body>
</html>

main.js文件代码如下：

// esModule语法
// 引入vue.js
import Vue from './vue.js'
// 引入组件模块
import App from './App.js'

new Vue({
    el: '#app',
    components: {
        App
    },
    template: `
        <App />
    `
});

App.js文件代码如下：

var app = {
    template:`
        <div>我是一个入口组件</div>
    `
};

// 导出app对象
export default app;

4. webpack打包命令执行：

webpack ./main.js build.js

报错：

[webpack-cli] It looks like webpack is not installed.
[webpack-cli] Would you like to install 'webpack' package? (That will run 'npm install -D webpack') (Y/n)

根据上述提示输入：Y，安装后出现下面的错误：

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
[webpack-cli] webpack was installed successfully.
[webpack-cli] { Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (C:\Users\Administrator\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at new WebpackCLI (C:\Users\Administrator\node_modules\webpack-cli\lib\webpack-cli.js:12:24)
    at runCLI (C:\Users\Administrator\node_modules\webpack-cli\lib\bootstrap.js:7:21)
    at promptInstallation.then (C:\Users\Administrator\node_modules\webpack-cli\bin\cli.js:35:13)
    at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }

上述问题的原因为：未安装全局webpack。

使用windows图标+R打开DOS命令窗口，输入webpack -v，提示webpack未安装：

C:\Users\Administrator>webpack -v
[webpack-cli] It looks like webpack is not installed.
[webpack-cli] Would you like to install 'webpack' package? (That will run 'npm i
nstall -D webpack') (Y/n) n

使用下面的cnpm命令安装webpack之后，查看webpack版本得到相应版本号即安装成功。

cnpm install -g webpack@3.12.0

回到项目目录下查看webpack版本也可以得到相应的版本号，再次执行打包命令：webpack ./main.js build.js，build.js成功编译生成。

在浏览器中打开index.html文件，成功渲染Vue组件内容：

5. export其他的导出方式

App.js：

// 声明并导出
export var num1 = 0;

// 先声明再导出
var num2 = 5;
export {num2};

// 导出函数
export function add(x, y) {
    return console.log( x + y);
}

main.js中引用及调用：

import {num1, num2, add} from './App.js'

console.log(num1, num2);
add(2, 7);

终端重新执行：webpack ./main.js build.js

页面输出：

6. package.json中scripts的执行

为scripts添加："build": "webpack ./main.js ./build.js"，

在终端执行：npm run build，同样可以编译文件，得到同样的结果。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^