Vue之webpack快速上手---kalrry
一、简介
webpack 是一个基于node.js的 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
二、Webpack的简单使用
1、准备工作
- 新建一个文件夹（如webpack-demo）并进入
- 打开cmd，输入npm init来生成package.json依赖对象文件
- 也可添加参数-y（即：npm init -y）来跳过输入信息。
2、Webpack安装
- 运行 npm i webpack -g 进行全局安装，这样可以在全局使用Webpack命令
- 或者在项目根目录中直接运行 npm i webpack --save-dev 安装到项目依赖中
- 安装webpack-cli
npm install -D webpack-cli
- 安装webpack-dev-server
npm i webpack-dev-server -D
- 在webpack.config.js中修改，添加devServer属性并配置
devServer{
open:true, //自动打开浏览器
port:3000, //修改端口号，修改为3000
contentBase:"src", //直接打开页面，src是项目的根目录
hot:true //webpack 4及以上版本可以直接启用，低版本还需要添加其它内容
}
3、项目常见目录
注：除node_modules、package.json、package-lock.json都是运行命令生成的，以下目录或文件需自己创建
- dist：存放最终发布版本的代码
- src：存放源代码
- index.html：首页
- main.js：项目的js入口文件
- webpack.config.js：webpack的配置文件
如下图：
4、webpack.config.js
1. 入口
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
2. 出口
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
3. webpack.config.js配置文件
const path = require('path');
module.exports = {
entry: path.join(__dirname, './src/main.js'), //入口，表示要打包那个文件
output: {
path: path.join(__dirname, 'dist'), //指定打包好的文件输出到那个目录
filename: 'my-first-webpack.bundle.js' //生成的文件名
}
};
4. 实例demo(让li元素隔行变色)
- 在main.js中
// 导入jQuery
import $ from './js/jquery.min.js'
//实现li元素的隔行变色
$(function(){
$('li:odd').css('background-color','red')
$('li:even').css('background-color','yellow')
})
-
处理mian.js
a.在命令行窗口输入 node_modules/.bin.webpack 或者直接 webpack 然后会处理mina.js然后生成对应的文件
b.如果修改了main.js一定要再运行一遍命令，否则修改的代码不会生效 -
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入js -->
<script src="../dist/my-first-webpack.bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</body>
</html>
- 最终效果
…ing
三、vue-cli融合webpack创建项目
1、安装vue-cli
- 开始之前，请确保安装了 Node.js和vue.js
- npm i -g @vue/cli-init //安装脚手架
2、用vue-cli来构建项目
- 新建一个文件夹作为项目存放地，然后使用命令行cd进入到文件夹输入一下命令
- 创建项目
// 1.如果想搭建版本 v3.x/4.x
vue create 项目目录
// 2.如果想搭建版本 2.X
vue init webpack 项目目录
- 启动项目
npm run dev
四、在webpack中的一些基本使用
1、ES6模块化规范中的定义：
- 每个js文件都是一个独立的模块
- 导入模块成员使用import 关键字
- 暴露(也就是导出、出口)模块成员使用export 关键字
注意：export default 和 export 是ES6向外暴露成员的方式。export default 向外暴露的成员可以用任何变量来接收；export 向外暴露的成员只能用{}接收，并且变量名必须相同，称作按需导出
import h from './a.js' //接收a.js中的对象，并命名为h
import {
title} form './a.js'
import {
title as t} form './a.js'
在一个模块中export default 只允许向外暴露一次
export 允许向外暴露多次
允许同时使用 export default 和 export向外暴露成员
export向外导出的成员可以使用as 起别名
2、组件的使用
vue文件基本格式
<template>
这里写模板
</template>
<script>
//这里写逻辑
export default {
data: function() {
return ''
},
methods: {
}
}
export var title="小明"
</script>
<style>
这里写样式
</style>
3、实例组件components
<template>
<div>
<h1>登录组件</h1>
</div>
</template>
<script>
export default {
name: 'login'
}
</script>
<style>
</style>
4、main.js
//导入vue
import Vue from 'vue'
//导入自定义的组件
import login from './components/login.vue'
var vm = new Vue({
el: '#app',
data: {
message: '哈哈哈'
},
components:{
login:login
}
)
最后将定义的组件放到 el对应的容器
注： 不需要再注册组件，但必须在conponents中指明组件
5、配置文件
1.module.loaders
2.plugins
Plugins用于扩展webpack，使之更加强大。在此示例html-webpack-plugin，可以通过模板生成html并自动引用相关css、js等文件。首先安装
npm install --save-dev html-webpack-plugin
3.resolve
resolve用来解决一些模块相关的问题。
4.开发调试
为了方便开发调试，我们可以配置开发服务器。首先，安装：
npm install webpack-dev-server --save-dev
这是webpack提供的一个开发服务器，可以实现热刷新，还是挺方便的。可在webpack的配置文件中通过devServer来配置：
,devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
配置devtool来选择开发工具，可定位bug文件。
devtool: 'eval'
devtool: 'eval'
5.添加启动脚本
在package.json的scripts后追加
"dev":"webpack-dev-server "
通过npm run dev用来启动服务器进行开发调试。devtool和devServer的配置也可以直接放到命令后面来启动：