webpack
webcpak的核心有兩個
一個是模塊化 讓我們可以進行模塊化開發，並且會幫助我們處理模塊之間的依賴關係
一個是打包 不僅僅是JavaScript文集 我們的css，圖片，json文件等 在webpack中都可以被當做模塊來使用
node -v 首先安裝node 我這裏安裝的是10.15.3
# 全局安裝webpack
npm install [email protected] -g
# 安裝項目依賴
npm install [email protected] -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-loaderconst 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>