关于webpack打包项目

最新推荐文章于 2024-04-27 08:39:59 发布

笑着吃蛋糕

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量162

点赞数

分类专栏： webpack 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45960957/article/details/107051924

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、关于webpack的安装

1、安装node.js环境
这个就不多说了
2、全局安装webpack
命令：npm install webpack -g
（不建议全局安装webpack，因为在创建项目时，还是要安装一次）
3、单个项目安装webpack：
命令：npm install webpack --save-dev
4、安装指定版本的webpac
命令：npm install webpack@3.12.0 -D

二、关于webpack打包项目

1、新建个项目目录并在目录中安装webpack
2、初始化目录生成package.json文件
命令：npm init --yes
3、创建index.html文件作为页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		<!--build.js作为打包生成文件-->
		<script type="text/javascript" src="./build.js"></script>
	</body>
</html>

5、创App.js作为引用的组件

var app={
	template:'<div>我是一个入口组件</div>'
}
//声明并导出
export default app;
export var num1 = 1;//作为一整个对象key导出
//声明再导出
var num2 = 3;
export {num2};
//也可以导出方法
export function add(x,y){
	return console.log(x+y);
}

6、创建main.js作为入口文件

//引用App.js中导出的对象 或者方法
import Vue from './vue.js'
import App from './App.js'
import {num1,num2,add} from './App.js'
console.log(num1);
console.log(num2);
add(3,4);
new Vue({
	el:'#app',
	components:{
		App
	},
	template:'<App />'
});

7、打包入口文件main.js到build.js
第一种打包方式：
低版本的webpack:命令webpack main.js ./build.js
高版本的webpack:命令webpack main.js -o ./build.js
第二种打包方式
在package.json文件中修改

"scripts": {
    "build": "webpack ./main.js -o ./build.js"
  },

然后在dos命令中：输入npm run build命令
8、编译index.html可以看到页面和控制台的效果为
在这里插入图片描述

笑着吃蛋糕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于webpack打包项目

一、关于webpack的安装1、安装node.js环境这个就不多说了2、全局安装webpack命令：npm install webpack -g（不建议全局安装webpack，因为在创建项目时，还是要安装一次）3、单个项目安装webpack：命令：npm install webpack --save-dev4、安装指定版本的webpac命令：npm install webpack@3.12.0 -D二、关于webpack打包项目1、新建个项目目录并在目录中安装webpack2、初始化
复制链接

扫一扫