前言
首先祝大家元宵節(jié)快樂，最近已經(jīng)好久沒有寫過文章了，剛好趁著這幾天剛剛上班，領(lǐng)導(dǎo)還沒有來，偷偷的寫一篇關(guān)于webpack搭建vue的博客。因?yàn)楣臼褂胿ue比較多，構(gòu)建vue項(xiàng)目使用vue-cli顯得有點(diǎn)臃腫，感覺還是自己配置比較好些，所以就有了這篇教程。由于水平有限，歡迎大家指正，一起進(jìn)步。
新建項(xiàng)目
1.新建名為webpackconfig文件夾
2.使用命令
npm init -y
在webpackconfig文件夾中生成package.josn
3.下載依賴包
npm i webpack webpack-dev-server webpack-cli -D
4.新建src文件夾并在src中創(chuàng)建main.js文件
alert(1)
5.新建webpack.config.js文件
webpack.config.js文件
var path = require('path');var config = { entry: './src/main.js', output: { path: path.resolve(__dirname + '/dist'),//打包生成文件地址 filename: '[name].build.js',//生成文件ming publicPath: '/dist/'//文件輸出的公共路徑 }}module.exports = config;entry: 引入文件，對(duì)象寫法可以引入多文件
entry: { app: './src/app.js', vendors: './src/vendors.js' }output：文件輸出地址
path: 輸出文件地址
filename：輸出文件名
publicPath：文件輸出路徑
6.新建一個(gè)index.html文件并引入main.js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <script src="/dist/main.build.js"></script></body></html>
7.配置package.json
"dev": "webpack-dev-server --open --hot", "build": "webpack --mode=development --progress --hide-modules",
配置之后運(yùn)行
npm run dev
會(huì)打開一個(gè)服務(wù)并彈出1
但是webpack會(huì)有一個(gè)警告，這個(gè)警告就是因?yàn)闆]有配置mode,就是沒有配置相應(yīng)模式
mode有兩個(gè)參數(shù)，一個(gè)是開發(fā)模式development一個(gè)是生產(chǎn)模式production。
可以在package.json里直接配置
"dev": "webpack-dev-server --mode=development --open --hot"
這樣就沒有警告了
接下來運(yùn)行
npm run build
會(huì)打包生成一個(gè)新的dist文件夾
8.引入loader兼容代碼
npm i babel-loader babel-core babel-preset-env -D
babel-preset-env 幫助我們配置 babel。我們只需要告訴它我們要兼容的情況（目標(biāo)運(yùn)行環(huán)境），它就會(huì)自動(dòng)把代碼轉(zhuǎn)換為兼容對(duì)應(yīng)環(huán)境的代碼。
更改webpack.config.js文件
module: { rules: [ { test: '//.js$/', include: path.resolve(__dirname + '/src'), exclude: /node_modules/, use: [ { loader: 'babel-loader', options: ['env'] } ] } ]}9.下載vue并在main.js引入
import Vue from 'vue';new Vue({ el: '#app', data: { msg: 'hello' }})運(yùn)行項(xiàng)目發(fā)現(xiàn)報(bào)錯(cuò)
vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
報(bào)這個(gè)錯(cuò)誤原因就是因?yàn)槭褂玫氖沁\(yùn)行版本的vue,編譯版本不能用，這時(shí)候在我們需要隨后我們還要配置別名，將 resolve.alias 配置為如下對(duì)象
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.resolve(__dirname, '/src') } }然后在運(yùn)行項(xiàng)目，發(fā)現(xiàn)已經(jīng)在頁面上打印出了hello。
一個(gè)簡(jiǎn)單的基于webpack的vue項(xiàng)目已經(jīng)搭建好了。
接下來就是一些配置
10.配置css
輸入命令下載style-loader css-loader
npm i style-loader css-loader -D
配置module中的rules
{ test: //.css$/, use:['style-loader','css-loader'], include: path.resolve(__dirname + '/src/'), exclude: /node_modules/}測(cè)試引入css，新建index.css并在在main.js中引入
index.css
div{ color:skyblue;} import './index.css';
可以看到文字顏色已經(jīng)改變了
11.支持圖片
輸入命令下載file-loader url-loader
npm i file-loader url-loader -D
配置module中的rules
{ test: //.(jpg|png|gif|svg)$/, use: 'url-loader', include: path.resolve(__dirname + '/src/'), exclude: /node_modules/ }測(cè)試引入圖片，新建asset文件夾放一張圖片并在在main.js中引入
import img from'./assets/a.png'
在html中顯示
<img :src="img" alt="">
12.引入html-webpack-plugin
輸入命令下載html-webpack-plugin
npm i html-webpack-plugin -D
設(shè)置plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [ new HtmlWebpackPlugin({ template: './index.html', chunks: ['main'] })]13.vue開發(fā)需要.vue文件只要引入vue-laoader和vue-template-compiler就行了
輸入命令下載vue-loader vue-style-loader vue-template-compiler
npm i vue-loader vue-style-loader vue-template-compiler -D
配置vue-loader
{ test: '//.vue$/', loader: 'vue-loader'}還需要引入vue-loader/lib/plugin
var VueLoaderPlugin = require('vue-loader/lib/plugin');并在plugin實(shí)例化
new VueLoaderPlugin()
新建App.vue
<template> <h1>Hello World!</h1></template><script> export default { name: 'App' }</script><style></style>更改main.js
import Vue from 'vue';import App from './App.vue';new Vue({ el: '#app', render: h => h(App)});運(yùn)行項(xiàng)目
14.開啟js熱更新
因?yàn)?vue-style-loader 封裝了 style-loader，熱更新開箱即用,但是 js 熱更新還不能用，每次修改代碼我們都會(huì)刷新瀏覽器，所以我們需要繼續(xù)配置。
const webpack = require('webpack');并在plugin中配置
new webpack.HotModuleReplacementPlugin()
熱更新已靜開啟
到現(xiàn)在為止webpack構(gòu)建的vue項(xiàng)目已經(jīng)跑起來了。
接下來就是一些優(yōu)化，
15.在resolve配置別名
resolve: { extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'], alias: { 'vue$': 'vue/dist/vue.esm.js', "@": path.resolve(__dirname, 'src'), "components": path.resolve(__dirname, '/src/components'), "utils": path.resolve(__dirname + '/src/utils'), }, modules: ['node_modules'] }16.支持sass
輸入命令下載sass-loader node-sass
npm i sass-loader node-sass -D
修改webpack.config.js的css
{ test: //.sass$/, use:['vue-style-loader', 'css-loader', 'sass-loader' ], include: path.resolve(__dirname + '/src/'), exclude: /node_modules/ },基本也配置個(gè)差不多了，還需要補(bǔ)充一些東西，以后會(huì)加上。
這一篇算是webpack構(gòu)建vue項(xiàng)目基礎(chǔ)吧，下一篇會(huì)再次補(bǔ)充并深入，謝謝大家，希望大家能多提意見，一起在碼農(nóng)的道路上越走越遠(yuǎn)
感恩騙點(diǎn)star項(xiàng)目地址 https://github.com/mr-mengbo/webpackconfig
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
