webpack渐入佳境

webpack渐入佳境

  • 2018-04-03
  • 次

只会使用CLI,技术永远得不到提升,既然你看到这篇文章说明你渴望学习到webpack更多干货,不讲太多废话,直接进入主题,此文假设您已经具备一定的前端基础,至少知道node是什么玩意就行.

创建工程

1
2
mkdir wpDemo   //新建目录
npm init       //初始化工程

安装依赖

1
2
npm i vue -S
npm i webpack@3.10.0 vue-loader css-loader vue-template-compiler -D
  • 这里我们的工程以3.+为示例
  • -D 是指将webpack安装到devDependencies, 因为最终的生产环境并不需要
  • -S 会装到dependencies中

创建src目录

分别创建App.vue, index.js

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
 <div id="app">{{text}}</div>
</template>
<script type="text/javascript">
  export default {
  	data() {
  	 return {
  	  text: 'text'
  	 }
  }
 }
</script>
<style scoped>
	
</style>

这部分代码只是拿来做模板显示

index.js

1
2
3
4
5
6
7
8
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(root)

这个将会作为webpack的入口文件, 我们通过声明一个Vue的实例,通过render函数去渲染template模块(App),之后调用$mount()进行编译,将生成的dom节点挂载到root上

创建配置文件

1
2
cd wpDemo
touch webpack-config.js

这里我们要实现将代码用webpack进行打包,放到dist目录下

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'),  //指定入口文件
  output: {
    filename: 'bundle.js',   //指定打包后的文件名
    path: path.join(__dirname, 'dist')  //打包后输出路径
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

module.rules 我们用来配置它的规则, 告诉webpack要处理哪种类型的文件,这里是以.vue格式类型文件, 再指定对应的loader去解析它, 因为我们的webpack它只认识javascript,不认得vue

配置打包命令

package.json

1
2
3
4
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },

这样我们就可以通过下面命令去打包项目,最终生成dist,里面存放我们指定的”bundle.js”文件

1
npm run build

源码地址

NOT EDN~

感谢您的阅读，本文由 lynhao 原创提供。如若转载，请注明出处：lynhao（http://www.lynhao.cn）
HandlerThread之源码完全解析
事件委托之一二事