webpack
webcpak的核心有两个
一个是模块化 让我们可以进行模块化开发，并且会帮助我们处理模块之间的依赖关系
一个是打包 不仅仅是JavaScript文集 我们的css，图片，json文件等 在webpack中都可以被当做模块来使用
node -v 首先安装node 我这里安装的是10.15.3
# 全局安装webpack
npm install webpack@3.6.0 -g
# 安装项目依赖
npm install webpack@3.6.0 -save-dev
webpack -version # 查看webpack版本
-
打包
在终端运行webpack命令时 都是使用全局的webpack 如果使用项目webpack 需要配置devDependencies
# webpack 命令打包指定文件 如果有依赖则自动继承依赖打包
webpack ./src/main.js ./dist/bundle.js
- 配置
创建一个 webpack.config.js
npm init # 初始化package.json配置文件 自动生成package.json文件
npm install # 安装package 自动生成 package-lock.json
// file: webpack.config.js
const path = require('path');
module.exports = {
// 打包入口文件
entry: './src/main.js',
// 出口文件
output: {
// 出口文件绝对路径
path: path.resolve(__dirname, './dist'),
// 打包后的文件名字
filename: 'bundle.js'
}
};
loader
官方链接：https://webpack.js.org/loaders
-
css样式文件
# 1. 安装loader
npm install --save-dev css-loader
npm install --save-dev style-loader
const path = require('path');
module.exports = {
// 打包入口文件
entry: './src/main.js',
// 出口文件
output: {
// 出口文件绝对路径
path: path.resolve(__dirname, './dist'),
// 打包后的文件名字
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/i,
// css-loader 只负责将css文件加载
// style-loader 负责将样式添加到dom中
// 这里配置顺序需要注意 是从后向前加载的
use: ['style-loader', 'css-loader'],
},
],
},
};
-
less 样式文件
安装 less-loader
npm install --save-dev less-loader less -
img 图片文件
安装 url-loader
npm install --save-dev url-loader安装 file-loader
npm install --save-dev file-loader -
ES6 -> ES5 语法处理
安装babel-loader
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置Vue
-
安装vue 添加运行时依赖
npm install vue --save - new Vue
// 使用vue进行开发
import Vue from 'vue'
const vm = new Vue({
el: "#app",
data: {
msg: "Vue message!",
},
methods: {}
});
修改HTML
<div id="app">
{{msg}}
</div>
-
runtime-orly
没有template功能 代码中 不能包含任何的template内容 -
runtime-compiler
拥有template 代码中可使用 template代码内容 -
解决runtime-orly报错
指定runtime版本 - 配置webpack.config.js
resolve: {
alias: {
// 指定 在其他地方导入vue的时候 vue来自哪里
// 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js
'vue$': 'vue/dist/vue.esm.js'
}
}
-
el 和template的区别
如果在Vue实例中写了 el 又写了template 那么 template会替换掉el挂载的元素 -
安装 vue-loader
开发依赖
npm install vue-loader vue-template-compiler --save-dev
代码抽离
src
├── css
│ ├── narmal.css
│ └── special.less
├── img
│ ├── Ink\ Cloud.jpg
│ └── timg.jpeg
├── js
│ └── demo.js
├── main.js
└── vue
│ ├── App.vue
│ └── Cpn.vue
│
└── index.html
│
└── package.json
│
└── webpack.config.js
│
└── dist
│
└── node_modules
// file：webpack.config.js
// 配置 loader
const path = require('path');
module.exports = {
// 打包入口文件
entry: './src/main.js',
// 出口文件
output: {
// 出口文件绝对路径
path: path.resolve(__dirname, './dist'),
// 打包后的文件名字
filename: 'bundle.js',
// 打包时动态修改文件加载地址
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/i,
// css-loader 只负责将css文件加载
// style-loader 负责将样式添加到dom中
// 这里配置顺序需要注意 是从后向前加载的
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片时 文件大小 小于limit时 会将图片编译成base64字符串形式
// 当加载图片时 文件大小 大于limit时 需要使用file-loader模块进行加载
limit: 9999,
// 打包后文件的命名规则
// [name] 文件打包前的名字
// [hash:8] 截取8位hash值
// [ext] 扩展名
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /\.js$/,
// exclude 转换的时候排除的内容
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
// vueloader
use: ['vue-loader']
}
],
},
resolve: {
alias: {
// 指定 在其他地方导入vue的时候 vue来自哪里
// 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js
'vue$': 'vue/dist/vue.esm.js'
}
}
};
file：main.js
// 依赖js文件
import {name, age} from "./js/demo";
console.log(name);
console.log(age);
console.log('webpack package test!!!!!!!!1');
// 依赖css文件
require("./css/narmal.css");
// 依赖less文件
require("./css/special.less")
document.write("<h1>前端谢广坤！</h1>")
// 使用vue进行开发
// 导入vue
import Vue from 'vue'
// 依赖vue组件 .vue文件
import App from './vue/App.vue'
const vm = new Vue({
el: "#app",
template: "<App/>",
components: {
App
},
methods: {}
});
file: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
file: App.vue
<template>
<div>
<h2>my name is cpn </h2>
<button @click="butClick">按钮</button>
<h2>{{name}}</h2>
<Cpn></Cpn>
</div>
</template>
<script>
import Cpn from './Cpn.vue'
export default {
name: "App",
components: {
Cpn
},
data() {
return {
message: 'Hello word!',
name: 'coder why'
}
}
}
</script>
<style scoped>
</style>
file:Cpn.vue
<template>
<h1>大写的Cpn</h1>
</template>
<script>
export default {
name: "Cpn"
}
</script>
<style scoped>
</style>
