webpack 4.0搭建vue框架，入門學習
俗話說一天不可以不學，今天就來學習一下，鼎鼎大名的webpack
webpack的配置真的是讓人髮指的地步
從這個坑中進入到另一個坑中，本篇文章可能有點長，請耐心看完
眾所周知，webpack是依附於node.js 的，所以在使用webpack之前需要先下載一個node，
安裝完node之後，接下來就是今天的主角
1 安裝webpack
開啟命令視窗 執行
npm webpack webpack-cli webpack-dev-server -g
2 安裝完成之後，你就可以小試一把
建立檔案結構如下
src
main.js
dist
index.html
結構完成之後，在根目錄下開啟命令視窗，
webpack4 提供了兩個直接打包的方式分別是
webpack --mode=development //用於開發環境 -》壓縮出來的較大
webpack --mode=production //用於生產環境 -》壓縮出來的較小
執行完成之後，在dist資料夾中可以看到壓縮過後的js
3 使用 webpack.div.js
上面的部分只是給咱們提供了一些簡單的壓縮js方式
在實際的開發中，我們需要壓縮css，html，lee等檔案還是需要loader的配合，所以還是需要用到webpack.div.js
下面開始webpack.div.js的配置，以及踩坑過程
一、先寫出檔案結構
config
webpack.div.js
dist
index.html
src
main.js
二、配置壓縮js的結構
webpack.div.js
var path = require('path') //node系統模組
module.exports = {
//入口檔案
entry: {
main: './src/main.js'
},
// 壓縮模式
mode: 'development',
//輸出配置
output: {
filename: '[name].js', //輸出名字配置【name】為原來的名字
path: path.resolve(__dirname, '../dist') //輸出的路徑
}
}，
module: {
rules：[
//用來載入loader
]
}
三 loader配置
css
需要下載兩個loader
npm i css-loader style-loader
在main中引入css
require（./name.css） //一定加入./否則會報錯
loader配置
module: {
rules: [{
test: /\.css$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
}
}]
需要注意css 在HTML中的引入，需要output配合
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/'
},
在HTML中寫入<script src="/main.js"></script>建議寫到html下面引入
HTML
需要下載三個loader
npm i file-loader html-loader extract-loader
檔案結構
config
webpack.dev.js
dist
src
index.html
main.css
main.js
config/webpack.dev.js
var path = require('path') //node系統模組
module.exports = { //暴露
entry: { //入口檔案
main: './src/main.js'
},
mode: 'development', //開發模式 可使用production生產模式進行替換
output: { //輸出
filename: '[name].js', //輸出時檔名
path: path.resolve(__dirname, '../dist'), //commonJs提供 檔名 -》輸出路徑
publicPath: '/' // html中的引入檔案路徑
},
devServer: { //熱跟新
contentBase: 'dist', //伺服器指向檔名。類似node中的靜態資源載入
overlay:true //報錯顯示到瀏覽器
},
module: { //loader配置
rules: [{
test: /\.css$/, // 正則css
use: [{
loader: "style-loader" //渲染
},
{
loader: "css-loader" //壓縮
}
]
},
{
test: /\.html$/, //正則 所有的html
use: [{
loader: "file-loader", //檔案輸出
options: { //名字
name: "[name].html"
}
},
{
loader: "extract-loader" //與main.js分離，打包成一個獨立的檔案
},
{
loader: "html-loader", //渲染，壓縮
options: {
attrs: ["img:src"]
}
}
]
}
}
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
</div>
</body>
<script src="/main.js"></script>
</html>
main/main.js程式碼
requrie（'./main.css'）
requrie（'./html.css'）
三，圖片
html中正常引入
在loader配置中加入
{
test: /\.(jpg|git|png)$/, //圖片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]" //壓縮為一個名字8位雜湊值的圖片
}
}]
}
-----------------------------------------------------------------------------------------------------------
以上屬性webpack的基本操作，下面使用webpack實現vue開發環境的搭建
檔案結構
config
webpack.dev.js
dist
index.html
ser
main.js
app.vue
config/webpack.dev.js
var path = require('path') //node系統模組
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader 伴生外掛
module.exports = { //暴露
entry: { //入口檔案
main: './src/main.js'
},
mode: 'development', //開發模式 可使用production生產模式進行替換
plugins: [
new VueLoaderPlugin() //vue-loader的VueLoaderPlugin
],
output: { //輸出
filename: '[name].js', //輸出時檔名
path: path.resolve(__dirname, '../dist'), //commonJs提供 檔名 -》輸出路徑
publicPath: '/' // html中的引入檔案路徑
},
devServer: { //熱跟新
contentBase: 'dist', //伺服器指向檔名。類似node中的靜態資源載入
overlay:true //報錯顯示到瀏覽器
},
resolve: { //引入vue.js
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: { //loader配置
rules: [{
test: /\.css$/, // 正則css
use: [{
loader: "style-loader" //渲染
},
{
loader: "css-loader" //壓縮
}
]
},
{
test: /\.html$/, //正則 所有的html
use: [{
loader: "file-loader", //檔案輸出
options: { //名字
name: "[name].html"
}
},
{
loader: "extract-loader" //與main.js分離，打包成一個獨立的檔案
},
{
loader: "html-loader", //渲染，壓縮
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(jpg|git|png)$/, //圖片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]" //壓縮為一個名字8位雜湊值的圖片
}
}]
},
{
test: /\.vue$/, //壓縮vue
use: [{
loader: "vue-loader" //壓縮vue的loader
}],
exclude: '/node_modules/' // 排除壓縮的檔案
}
]
}
}
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<app></app>
</div>
</body>
<script src="/main.js"></script>
</html>
src/app.vue
<template>
<div>
我是{{a}}
</div>
</template>
<script>
export default {
name: 'app',
data:function(){
return {
a:'小渣渣'
}
}
}
</script>
<style>
</style>
ser/main.js
import Vue from 'vue'
import app from "./app.vue"
new Vue({
el:'#box',
components:{
app
}
}
)