Webpack学习(一)

今日才真正开始学习Vue.js,之前对Vue一点了解都没有,而且不清楚Vue的各种语法,但有一点我是清楚的,使用Vue,必须要学习使用Webpack。跟随视频讲师的的讲解来做应该能够让我少走一些弯路,不过实际上从开发工具的选用来说就已经与讲师产生了分歧,讲师用的是Visual Studio Code,我还是更喜欢用Webstorm。好在两者功能都很强大,也很智能。下面就来开始讲解步骤(前提,需要安装好nodejs并配置完成,我这里使用Mac下的homebrew安装。具体方法请另行Google)。

创建一个Empty Project

  • location可以自己随便修改,我这里把最后的untitled改成Vue-webpack-demo,点击Create
  • 创建src文件夹,并打开开发工具的Terminal窗口。命令行会自动进入到当前项目的目录下
  • 命令行中输入npm init -y
  • 执行完毕再输入npm install webpack vue vue-loader css-loader vue-template-compiler
  • 执行完毕就可以看到项目目录下多出了node_modules, package.jason, package-lock.json
  • 因为我之前对webpack的配置有了一些问题,现在需要在开发工具的设置中设置一下webpack的配置文件路径。下面是我手动设置的路径,如果是新创建的项目是会自动配置的,不需要手动配置了入下面第二张图片。

  • src下新建一个Vue组件
  • 文件名叫app,创建好之后有一个报错信息
  • 需要转为ES6
  • 完成后的代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div id="test">{{text}}</div>
</template>

<script>
export default {
data() {
return {
text: 'abc'
}
}
}
</script>

<style scoped>
#test{
color: red;
}
</style>

创建Webpack配置文件

  • 在项目目录下创建webpack.config.js文件
  • 输入以下内容
1
2
3
4
const path = require('path');
module.exports = {
entry: path()
};
  • 在src目录下创建index.js作为入口文件
1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div');

document.body.appendChild(root);

new Vue({
render: (h) => h(app)
}).$mount();
  • 完善webpack.config.js文件
1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: "bundle.js",
path: path.join(__dirname, 'dist')
}
};
  • 在Package.json中添加使用build脚本配置"build": "webpack --config webpack.config.js"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "Vue-webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^0.28.9",
"vue": "^2.5.13",
"vue-loader": "^14.1.1",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.11.0"
}
}

命令行中执行npm run build

  • 执行结果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 [email protected]  ~/Documents/Work/Project/FromGit/HTML5Project/Vue-webpack-demo  npm run build
> [email protected] build /Users/Jason/Documents/Work/Project/FromGit/HTML5Project/Vue-webpack-demo
> webpack --config webpack.config.js

Hash: 42fc335c62578fcc1758
Version: webpack 3.11.0
Time: 347ms
Asset Size Chunks Chunk Names
bundle.js 227 kB 0 [emitted] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./src/index.js 178 bytes {0} [built]
[6] ./src/app.vue 193 bytes {0} [built] [failed] [1 error]
+ 4 hidden modules

ERROR in ./src/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div id="test">{{text}}</div>
| </template>
@ ./src/index.js 2:0-27
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Jason/.npm/_logs/2018-02-13T02_57_19_290Z-debug.log
  • 出现了报错信息You may need an appropriate loader to handle this file type.,表示需要为”.vue”文件声明一个loader,因为webpack原生只支持ES5语法的js文件,所以需要在webpack.config.js中增加一些配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const path = require('path');

module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: "bundle.js",
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader"
}
]
}
};
  • 再次执行npm run build
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
> [email protected] build /Users/Jason/Documents/Work/Project/FromGit/HTML5Project/Vue-webpack-demo
> webpack --config webpack.config.js

Hash: 160d59a2bde67570add6
Version: webpack 3.11.0
Time: 1855ms
Asset Size Chunks Chunk Names
bundle.js 245 kB 0 [emitted] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/app.vue 102 bytes {0} [built]
[3] ./src/index.js 178 bytes {0} [built]
[7] ./src/app.vue 1.86 kB {0} [built]
[8] ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5ef48958","scoped":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/app.vue 1.54 kB {0} [built]
[9] ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5ef48958","scoped":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/app.vue 206 bytes {0} [built]
[13] ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5ef48958","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/app.vue 459 bytes {0} [built]
+ 8 hidden modules
  • 根目录下多了一个dist文件夹,其中有一个bundle.js文件

总结

  • Webpack的作用就是将所有我们项目需要的不同类型的静态资源打包成为一个js文件,项目通过引用该js就可以使用对应资源的方法,并且也有一个模块化的内容,使得不同项目能够复用各个模块