什麼是webpack，爲什麼要使用它？
WebPack可以看做是資源構建，模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，less、img、scss、commonJs,ES6等），並將其打包爲合適的格式提供瀏覽器使用。
webpack核心
- entry:入口
- output:出口
- loader:資源轉換器
- plugin:插件
- mode:模式
還有其他的打包壓縮工具：
grunt https://www.gruntjs.net/
gulp https://www.gulpjs.com.cn/
fis3(百度) http://fis.baidu.com/
webpack https://webpack.js.org/
WebPack和Grunt以及Gulp相比有什麼特性
Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。
那麼開始實現吧，其實我寫的這個官網的也是提供的，比葫蘆畫瓢吧
首先必須要有node，這個使用的是webpack最新版，node呢沒有的下載，有的呢升級到最新版本
創建一個項目文件夾 就叫webpack-vue吧
npm init -y 安裝，有關node的必須要有package.json文件
利用npm install webpack webpack-cli --save-dev安裝依賴
通過 ./node_modules/.bin/webpack -v 來檢查是否安裝成功 或者直接 webpack-v
然後在package.json中的script中配置：
"scripts": {
"build":"webpack"
},
其實這一點，很多小白在去公司的時候人家公司內部使用webpack搭建的vue怎麼跑起來都不知道，其實看script就可以了，有打包，運行等，自行去看
在根目錄下創建src文件夾，並創建index.js 這是隨意的
在根目錄下運行npm run build , 會構建出dist文件夾，和壓縮的main.js文件
webpack4.x 默認是零配置，零配置就是不用配置入口出口輸出的文件名，只要npm run build，會自動構建出來，放到dist目錄，即main.js文件
webpack即默認的入口:src/index.js,默認出口:dist/main.js
手動配置將入口設置爲:src/main.js,出口:dist/bundel.js 我這裏這樣配置，隨意而爲吧
如果要手動配置，必須要創建webpack配置文件夾,來執行，webpack默認配置文件:webpack.config.js
在根目錄中創建
const path = require('path');//用來快速獲取路徑
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin")
const config = {
//指定模式，這個是開發環境 production是生產環境
mode: "development",
//項目的入口文件
entry: "./src/index.js",
output: {
//當前根目錄下的 dist
path: path.resolve(__dirname, 'dist'),
//輸出的文件名
filename: "bundle.js"
},
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
//{test:/\.(sass|scss)$/,use:['style-loader', 'css-loader','sass-loader'] },
{test:/\.(jpg|jpeg|png|gif)$/, use: ['url-loader'] },
{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"},
{test:/\.vue$/,loader:'vue-loader'}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// title:"ssl"
template:'./index.html',
filename:'index.html'
}),
new VueLoaderPlugin()
],
devServer:{
port:9999,
hot:true,//實現熱更新
contentBase:path.join(__dirname,'dist')
}
}
module.exports = config;
這是我最後配置完成功吧vue跑起來的一些配置
下面一一介紹
黃色警告如何解決:給webpack.config.js中的mode指定線上上產環境produciton、開發環境development
設置mode爲——>mode:“development”,
通過安裝 npm i clean-webpack-plugin -D 可以自動清理垃圾的打包文件
在webpack.config.js中首先引入 const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’)
在設置
plugins:[
//通過plugins實例化
new CleanWebpackPlugin()
]
基於webpack搭建一個本地環境
首先安裝: npm i webpack-dev-server -D
在package.js中配置
"scripts": {
"build": "webpack",
"dev":"webpack-dev-server"
},
還可以在webpack.config.js中設置固定的端口號
devServer: {
//實現熱更新
hot:true,
//設置指定端口號
port: 9999,
//最後出書的路徑
contentBase: path.join(__dirname, 'dist')
}
11、如何實現自動構建注入文件
安裝： npm install html-webpack-plugin -D
在webpack.config.js中配置
//自動注入const HtmlwebpackPlugin =require('html-webpack-plugin')
plugins: [
//清理垃圾的打包文件
new CleanWebpackPlugin(),
new HtmlwebpackPlugin({
//可以指定文件當模板 讓這個文件爲入口 讀取模板的入口文件
template:"./index.html",
//最會將index.html輸出到dist文件夾中
filename:'index.html',
})
],
webpack默認只識別.js、.json文件，如何讓webpack識別css、less、scss、sass、img文件呢？
安裝：
npm install style-loader css-loader -D 用於識別css;
npm install less less-loader -D 用於識別less, 定義less是以@開頭 例如：@border_a:#00f;
npm install sass-loader node-sass -D 用於識別scss,定義scss是以@開頭,例如：@border_a:#00f
npm install url-loader -D 用於識別圖片格式，
要想設置多入口，在webpack.config.js中配置
//項目的入口文件,也就是代碼執行從這裏開始的
entry:{
"index":"./src/main.js",
"home":"./src/home.js"
},
//項目的輸出目錄
output:{
//獲取到當前文件的根目錄 設置輸出目錄
path:path.resolve(__dirname,"dist"),
//輸出的文件名
filename:"[name].js" //開啓多入口的話這裏要寫"[name]_[hash:指定hash位數].js" ，
//hash只要文件一改，hash就會變，可以實時的更新後臺傳遞數據 //chunk
},
ok如上簡單了了解了下webpack如何自動配置
那麼如何搭建Vue呢？
首先安裝es2015（es6）的包：babel，安裝babel可以讓es6、es7、es8、es9轉譯爲es5
安裝命令: npm install --save-dev babel-loader @babel/core
安裝Vue包
//webpack通過loader識別文件的匹配規則
module:{
//css的配置
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.(sass|scss)$/,use:['style-loader','css-loader','sass-loader']},
{test:/\.(jpg|jpeg|png|gif)$/,use:['url-loader']},
//babel-loader意思排除node_modules外的.js文件，
{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"},
]
}
安裝.babelrc 命令npm install @babel/preset-env --save-dev
根目錄下創建.babelrc文件
配置如下
{
"presets": ["@babel/preset-env"]
}
編譯template模板 安裝vue包：
命令：npm install vue vue-loader vue vue-template-compiler -D
在src文件下新建main.js文件，進行配置
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:"#app",
render:(ssl)=>ssl(App)
})
在webpack.config.js文件中引入，並在plugins中實例化插件，vue就集成了
引入：const VueLoaderPlugin=require('vue-loader/lib/plugin')
// 裏面可以放各種插件
plugins:[
//添加文件清理的插件
new CleanWebpackPlugin(),
new HtmlwebpackPlugin({
//可以實現熱更新，類似與ajax
hot:true,
//讓這個文件爲入口 讀取模板的入口文件
template:"./index.html",
//最會將index.html輸出到dist文件夾中
filename:'index.html',
}),
new VueLoaderPlugin()
],
這時 package.json文件中
"dependencies": {
"vue": "^2.6.11", //最好是放在dependencies中
通過命令npm install vue -S
如果"vue": "^2.6.11",在devDependencies中，
通過npm uninstall vue -S卸載掉，在安裝npm install vue -S
"vue-router": "^3.1.6"
}
這裏用-S比較好，畢竟自己配置測試，就沒有注意這些 -S和-D就不用多介紹了吧，前者是線上，後者是本地
這樣創建.vue文件就可以識別了
在vue中集成路由的配置，vuex的配置
axios啦或者什麼的和vue一樣了
命令：Vuex: npm install vuex -S； 路由：npm install vue-router -S；
路由的配置，在src文件下創建router文件夾，新建index.js文件
```配置的邏輯一樣和在vue中
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 導入組件
import Home from '../pages/home.vue'
import About from '../pages/about.vue'
//配置路由
const routes = [
{ path: "/home", component: Home, name: "Home" },
{ path: "/about", component: About, name: "about" },
]
//實例化路由
const router = new VueRouter({
routes
})
//導出
export default router
在main.js中將router掛載到vue實例上
import Vue from 'vue'
import App from './App.vue'
//引入router文件
import router from './router/index'
//引入vuex store文件
import store from './store/index.js'
new Vue({
el:"#app",
router,
store,
render:(ssl)=>ssl(App)
})
**在App.js中**
<template>
<div>
<h2>APP.vue文件</h2>
//router-view就是讓路由內容顯示的地方
<router-view></router-view>
<router-link to="/home">首頁</router-link>
<router-link to="/about">關於</router-link>
</div>
</template>
<script>
export default {
name:"app",
data() {
return {}
},
}
</script>
<style></style>
Vuex的配置，在src文件下創建store文件夾，新建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//state
const state={
count:0,
};
//action
const action={
};
//mutations
const mutations={
};
//getters
const getters={
};
export default new Vuex.Store({
state,
action,
mutations,
getters
})
然後在main.js中引入，掛載，和vue一樣
最後呢 代碼我提交帶github上了
https://github.com/user-sunshilin/webpack-ssl
npm run build 進行打包
npm run dev 進行本地服務器運行
自動生成dist目錄