Webpack+vue开发(1) - zhanghuan2018的博客

初始化项目（安装 node、npm）

1 2	创建项目文件夹, npm init -y 创建 package.json 项目根目录下建立src和dist文件夹，分别用来存放项目源码和webpack编译后的代码

安装模块

1
2
3

vue npm install vue@1 --save
npm install webpack --save-dev
npm install --save-dev webpack-cli -g (全局安装)

入口文件

在根目录下直接建立一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
  <div id="app">{{message}}</div>  <!-- Vue模板入口 -->
  <script src="dist/main.js"></script>
</body>
</html>

在src下建立一个main.js

const Vue = require('vue')
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

在package.json的 scripts 配置中添加运行脚本

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack src/main.js -o dist/main.js"
}

运行npm run dev

打包

webpack demo.js -o demo.bundle.js
其中的一些参数值:
  Version:webpack版本
  time:这次打包所花费的时间
列表信息
  Asset:打包这次生成的文件
  Size:这次生成文件的大小
  Chunks:这次打包的分块
  chunk Names:这次打包的名称

问题处理

Module not found: Error: Can’t resolve ‘dist/main.js’

原因是我的webpack版本过高,原来的命令已经不适用(webpack -v 查看版本)

1
2
3

webpack src/main.js dist/main.js
改成
webpack src/main.js -o dist/main.js

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.

黄色部分的警告的意思是,没有设置模式,有开发模式和生产模式两种,接下来,找到package.json.添加上”dev”和”build”这两个信息以及他们的值.

1 2	"dev": "webpack --mode development" "build": "webpack --mode production"

初始化项目 （安装 node、npm）