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

2021-09-18 22:02:30 阅读：187 来源： 互联网

标签：npm Vue cli -- App js webpack install

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组件内容：

标签：npm,Vue,cli,--,App,js,webpack,install
来源： https://blog.csdn.net/u010234868/article/details/120374132

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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