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.03. 项目根目录下新建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，同样可以编译文件，得到同样的结果。
扫一扫
9987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
