01-webpack介绍
官方文档：https://www.webpackjs.com/concepts/
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
# 全局下载webpack的3.12.0版本 npm install [email protected]3.12.0 -g # 查看版本 webpack -v
02-webpack的使用
# 把main.js 打包成 bundle.js webpack ./main.js ./bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<!-- bundle.js是通过webpack编译打包输出的js文件 -->
<script type="text/javascript" src="./bundle.js"></script>
<!-- webpack ./main.js ./bundle.js -->
<!-- 这种语法浏览器不兼容 -->
<!-- <script type="text/javascript">
import Vue from ‘./vue.js‘
</script>
-->
</body>
</html>
module.html
// 声明入口的组件
var App = {
template:`<div>我是入口组件</div>`
};
// 声明并导出
export var num = 2; //作为一整个对象的key抛出
// 声明在导出
var num2 = 4;
export {num2}
// 抛出一个函数
export function add(x,y) {
return console.log(x+y);
}
// 先抛出
export default App;
App.js
// 整个程序的入口
// 引入第三方的库 es6Module模块导入方法
import Vue from ‘./vue.js‘
//再导入
// import App from ‘./App.js‘
// 对象的解构
// import {num,num2,add} from ‘./App.js‘
import * as object from ‘./App.js‘
console.log(object);
// console.log(num);
// console.log(num2);
// add(3,5)
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App:object.default
},
template:`<App />`
});
main.js
// 引入第三方的库 es6Module模块导入方法 import Vue from ‘./vue.js‘
new Vue({ el:"#app", data(){ return {
} }, components:{ App:object.default }, template:`<App />`});
# 进入当前的根目录下，执行
npm init --yes
# 下载webpack为项目开发依赖
npm install [email protected]3.12.0 -D
# 创建webpack.config.js
module.exports = {
// entry 入口
// output 出口
entry:{
main: ‘./main.js‘
},
output:{
filename: ‘./bundle.js‘
},
// 在开发环境下，每次更改代码，都会重新进行编译
watch: true,
}
# 直接执行 webpack 就可以了
webpack
# 或者在 package.json里配置
"scripts": {
"dev": "webpack"
},
# 在终端执行，也可以获得结果
npm run dev
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.17"
}
}
package.json
module.exports = {
// entry 入口
// output 出口
entry:{
main: ‘./main.js‘
},
output:{
filename: ‘./bundle.js‘
},
// 在开发环境下，每次更改代码，都会重新进行编译
watch: true,
}
webpack.config.js
2.1 模块
在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。
每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。
2.2 什么是webpack模块
webpack 模块能够以各种方式表达它们的依赖关系。
03-webpack的配置修改
//自带nodejs环境 cmd规范
// module.exports = {}
// var a = require(‘./webpack.config.js‘)
// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
// 入口
entry:{
"main":‘./main.js‘
},
// 出口
output:{
filename:‘./bundle.js‘
},
watch:true
}
webpack.dev.config.js
// 上线环境下
module.exports = {
// 入口
entry:{
"main":‘./main.js‘
},
output:{
filename:‘./bundle.js‘
}
};
webpack.prod.config.js
开发环境：webpack.dev.config.js ，上线环境下：webpack.prod.config.js ，在 package.json 里配置：
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.17"
}
}
04-css-loader介绍
// 导入css文件
import ‘./main.css‘
# 下载 css-loader和style-loader
npm install css-loader -D;npm install style-loader -D
# 配置loader，在webapck.config.js中
module.exports = {
// 入口
entry:{
"main":‘./main.js‘
},
// 出口
output:{
filename:‘./bundle.js‘
},
watch:true,
// 模块中的loader
module: {
loaders:[
{
test: /\.css$/,
// 先识别css-loader 再识别style-loader
loader: ‘style-loader!css-loader‘
}
]
}
};
05-webpack插件-plugins
插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决loader无法实现的其他事。
5.1 剖析
webpack 插件是一个具有apply属性的 JavaScript 对象。apply属性会被webpack compiler调用，并且 compiler 对象可在整个编译生命周期访问。
5.2 用法
由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。根据你的 webpack 用法，这里有多种方式使用插件。
# 安装插件 html-webpack-plugin
npm install html-webpack-plugin -D
# 配置webpack.prod.config.js
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
// 插件
plugins:[
new HtmlWebpackPlugin({
template:‘./index.html‘,//参照物
})
]
// nodejs中内置模块path
var path = require(‘path‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
// html-webpack-plugin
// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
// 入口
entry:{
"main":‘./src/main.js‘
},
// 出口
output:{
//相对转绝对
path:path.resolve(‘./dist‘),
filename:‘./bundle.js‘
},
// 模块中的loader loader加载器 它能对css、json png jpg mp3 mp4 es6的js代码
module:{
loaders:[
{
test:/\.css$/,
loader:‘style-loader!css-loader‘
}
]
},
// 插件
plugins:[
new HtmlWebpackPlugin({
template:‘./index.html‘,//参照物
})
]
};
webpack.config.js
npm install -g http-server # 上线测试命令 hs -o -p 9999
06-webpack-dev-server介绍
# 下载
npm install [email protected] -D
# 配置package.json
"scripts": {
"dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js"
}
# 执行完，代码更新时，会自动变化
npm run dev
{
"name": "02-module_deep",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.9.0"
},
"dependencies": {
"vue": "^2.5.17"
}
}
package.json
07-vue-loader和单页面组件的介绍
# 下载 npm install [email protected] -D [email protected] -D
// nodejs中内容模块
var path = require(‘path‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
// html-webpack-plugin
// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
// 入口
entry:{
"main":‘./src/main.js‘
},
// 出口
output:{
path:path.resolve(‘./dist‘),//相对转绝对
filename:‘./bundle.js‘
},
// 模块中的loader loader加载器 它能对css、json png jpg mp3 mp4 es6的js代码
module:{
loaders:[
{
test:/\.css$/,
loader:‘style-loader!css-loader‘
},
{
test:/\.vue$/,
loader:‘vue-loader‘
}
]
},
watch:true,
// 插件
plugins:[
new HtmlWebpackPlugin({
template:‘./index.html‘,//参照物
})
]
};
webpack.dev.config.js
<!-- 组件结构 html
业务逻辑 js
组件样式 css
-->
<template>
<!-- 一定是闭合标签 -->
<div class="app">
<h3>{{msg}}</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<Header />
</div>
</template>
<script>
import Header from ‘./Header.vue‘
export default{
data(){
return {
msg:‘学习单页组件‘
}
},
methods:{
},
computed:{
},
// 挂载
components:{
Header
}
}
</script>
<!-- scoped 它表示只对当前组件的样式起作用 -->
<style scoped>
/*全局的*/
h3{
color: yellow;
}
</style>
App.vue
<template>
<div>
<h3>{{att}}</h3>
</div>
</template>
<script>
export default {
name: ‘Header‘,
data() {
return {
att:"alex"
};
},
};
</script>
<!-- scoped 它表示只对当前组件的样式起作用 -->
<style scoped>
h3{
color: green;
}
</style>
Header.vue
<!-- scoped 它表示只对当前组件的样式起作用 -->
<style scoped>
/*全局的*/
h3{
color: yellow;
}
</style>
08-前端脚手架 vue-cli
# 下载安装vue-cli
官网：https://cli.vuejs.org/zh/
# 下载，版本是3.x
npm install -g @vue/cli
# 检查版本
vue -V
# 下载旧版本2.x
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project
Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具。
# 此时电脑上既可以使用2.x和3.x版本的脚手架工具
# 关于vue-cli 2.x版本的脚手架工具-命令
vue init <模板> <项目名>
# 模板：
webpack-simple 简单配置webpack模板
webpack 复杂的webpack模块，单元测试、ESlint、热重载
# 1. 切换到指定的文件夹，执行，生成项目
vue init webpack-simple my-project
# Use sass ? No
# dependencies 当前项目依赖的模块，devDependcies 通过脚手架搭建之后必须要以来的包，开发环境依赖
# 2. 然后执行 npm install 安装所有依赖
npm install
# 3. 执行
npm run dev
09-项目各目录文件详解
vue的生态圈vue-awesome 参考链接：https://segmentfault.com/p/1210000008583242/read?from=timeline
// main.js是整个项目的入口启动文件
// 导入npm下载的模块
import Vue from ‘vue‘
// 导入自己编写的模块
// 不同在于 如果是npm下载的 from ‘名称‘ 自己编写的模块 from ‘路径引入‘
import App from ‘./App.vue‘
// 1.引入全局的组件
import Header from ‘./components/Common/Header.vue‘
// 2.注册全局组件
Vue.component(Header.name,Header);
new Vue({
el: ‘#app‘,
// DOM直接渲染
// appendChild()
render: h => h(App)
});
main.js
<template>
<!-- 组件的页面结构 -->
<div id="app">
<Header />
<h3>{{msg}}</h3>
<div v-html = ‘title‘></div>
<ul>
<!-- key绑定key的时候 如果数据中有id 就绑定id，没有id 绑定index -->
<li v-for = ‘(item,index) in datas‘ :key = ‘index‘>
{{ item }}
</li>
</ul>
<Home :text = ‘text‘ @add = ‘addHandler‘/>
</div>
</template>
<script>
//导入
import Home from ‘./components/Home/Home.vue‘
// 组件内部的业务逻辑
export default {
name: ‘app‘,
data () {
return {
msg: ‘我们来学习vue-cli脚手架项目‘,
title:"<h3>alex</h3>",
datas:[‘抽烟‘,‘喝酒‘,‘烫头‘],
text:"我是父组件的内容"
}
},
components:{
Home
},
methods:{
addHandler(data){
console.log(data);
}
}
}
</script>
<style>
/*组件的样式*/
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
App.vue
10-项目中使用vue的API
11-公共组件的创建和使用
// 1.引入全局的组件 import Header from ‘./components/Common/Header.vue‘ // 2.注册全局组件 Vue.component(Header.name,Header);
12-vue-cli的webpack模板项目
# 1. 创建webpack模板的项目 vue init webpack my-project-webpack # 2. 执行 cd my-project-webpack # 3. 运行 npm run dev 或者 npm run start
13-项目中集成插件vue-router
// 整个路由的配置文件
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
// alias @
// /Users/majinju/Desktop/vue_lesson/代码/06-vue-cli脚手架的使用/02-webpack_project/src
import Home from ‘@/components/Home/Home‘
import FreeCourse from ‘@/components/FreeCourse/FreeCourse‘
// 让vue使用此插件
Vue.use(VueRouter);
// 相当于
// Vue.protoype.$router = VueRouter
var router = new VueRouter({
routes:[
{
path:‘/‘,
name:‘Home‘,
component:Home
},
{
path:‘/free‘,
name:‘FreeCourse‘,
component:FreeCourse
}
]
});
export default router;
src/router/index.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router/index.js‘
Vue.config.productionTip = true;
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
router,
components: { App },
template: ‘<App/>‘
});
src/main.js
<template>
<div id="app">
<router-link to = ‘/‘>首页</router-link>
<router-link to = ‘/free‘>免费课程</router-link>
<router-view />
</div>
</template>
<script>
export default {
name: ‘App‘
}
</script>
<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/App.vue
# 下载 vue-router npm install vue-router -S npm run dev # 1. 先在main.js 导入vue-router index.js ---> import VueRouter from ‘vue-router‘ main.js ---> import router from ‘./router/index.js‘ # 2.
原文地址：https://www.cnblogs.com/pgxpython/p/10147573.html
时间： 2024-10-04 09:18:10