通过webpack2从0开始配置自己的vue项目 1

时间：2022-11-16 13:44:41

PS 阅读者需要node基础、webpack原理知识、vue基础

安装node 这个网上很多教程

打开终端

创建项目

npm init

全局安装：

cnpm i webpack webpack-dev-server -g

在项目里安装

cnpm i webpack  --save

定义项目的目录结构

创建一个app文件夹

在app文件夹创建index.html

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="./main.js"></script>
</body>
</html>

　在 app目录创建main.js

var greeter = require('./Getter.js');
document.getElementById('root').appendChild(greeter());

　在 app 目录创建Getter.js

module.exports = funtion() {
var greet = document.createElement('div');
greet.textContent ='学习 webpack'
return greet;
};

在项目的顶层创建webpack.config.js

module.exports = {
     devtool: 'eval-source-map', //配置生成Source Maps，选择合适的选项
     entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
　　　output: {
　　　　path: __dirname + "/dist", //打包后的文件存放的地方
　　　　filename: "[name].js" //打包后输出文件的文件名
　　　　},

}

　这时候本项目的终端运行 webpack 命令 就会出现一个main.js 这就实现了简单的打包

相关文章