webpack4配置手動搭建vue

NO IMAGE

首先簡單說下目錄結構

webpack4配置手動搭建vue

build目錄:存放webpack的配置項

public:index模板

src:vue的入口以及頁面

其它的配置在稍後細細道來~~~

環境:node8.9.4 、vue2.6.10、webpack4.41.2

1.vue頁面路由入口等(不多略過)

import Vue from 'vue'
import App from './app.vue'
import router from './route.js'
import './assets/app.styl'
new Vue({
router,
render: h => h(App)
}).$mount("#app");

樣式主要是用stylus,當然你也可以用sass、less等,頁面只有兩個。

home.vue

<template>
<div class="container">
<span>hello world!</span>
<img src="@/assets/bghtml_1.jpg" alt="">
</div>
</template>
<style scoped lang="stylus">
.container
span
color yellow
</style>

test.vue

<template>
<div class="container">
<span>hello test!!!!</span>
</div>
</template>
<style scoped lang="stylus">
.container
span
color green
</style>

講幾個我配置的時候遇到的問題或應用(探索總是這麼的~~)

1.啟動項目服務vue頁面空白?

配置好了一切信心滿滿的啟動開發調試,發現vue的頁面沒有展示出來(白板),我以為是路由問題,路由就只有兩個(應該沒有問題啊~~)。於是我去查了一下vue-loade。vue-template-compiler(vue-loader有詳細介紹) 就是這個東西,安裝後去webpack的plugin中引用,如下

webpack4配置手動搭建vue
webpack4配置手動搭建vue

2.創建模塊路徑別名。

webpack4配置手動搭建vue

我的webpack配置在build下面,所以用了../src,想必用過腳手架vue-cli的都配置過這個東西。引用的話直接用@代替src/。

3.處理靜態資源只引入url-loader報錯?

webpack4配置手動搭建vue
webpack4配置手動搭建vue

運行的時候一直報圖片錯誤。老樣子去查詢url-loader,官方講到url-loader,options的一些配置就是file-loader的一些配置,我試了一下安裝了file-loader,再啟動服務,成功。webpack走url-loder options的某些配置,會去查找file-loader這個包。

4.提取css為單獨的文件?

webpack4配置手動搭建vue

webpack4配置手動搭建vue

按照官方的安裝、配置,一切看起來都是那麼的完美,但是webpack打包的時候也沒報錯,也沒warning。找來找去找不到問題所在,這個時候只有求助於google搜索引擎,看見一篇貼子說如果webpack做tree shaking(通常用於描述移除 JavaScript上下文中的未引用代碼)的時候,一定要把css文件標記為無副作用,否則打包會移除css文件。

webpack4配置手動搭建vue

如上在package.json裡面寫入css和styl(我的文件是stylus文件)。意思就是遇到css文件和styl文件就不做tree shaking處理。

5.babel中.babelrc的配置。

如果要使用es6的語法,必須要用babel轉譯為遊覽器可運行的代碼。你要使用一些includes方法等,必須要使用@ babel / polyfill或者@babel/plugin-transform-runtime,自行查詢babel知識。
當然也可以:

webpack4配置手動搭建vue

在.babelrc配置了”useBuiltIns”: “usage”後,Babel 會在你使用到 ES2015+ 新特性時,自動添加 babel-polyfill 的引用,按需引入。

完整配置webpack.dev.js開發環境,webpack.pro.js生產環境,webpack.common.js公用配置

webpack.dev.js

const webpackMerge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack');
const path = require('path');
module.exports = webpackMerge({
mode: 'development',
devServer: {
// contentBase: '../dist',
publicPath: '/',
compress: true,
hot: true,
hotOnly: true,
port: 8080,
overlay: true,
clientLogLevel: 'none'
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.(stylus|styl)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'postcss-loader',
'stylus-loader',
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}, common);

webpack.pro.js

const webpackMerge = require('webpack-merge');
const common = require('./webpack.common');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = webpackMerge({
mode: 'production',
module:{
rules:[
{
test: /\.(stylus|styl)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'postcss-loader',
'stylus-loader',
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}
]
},
plugins:[
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "css/[name].[hash].css",
}),
// 每次打包刪除上次的包文件
new CleanWebpackPlugin()
]
}, common);

webpack.common.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/[name].[hash].js'
},
resolve:{
alias: {
'@': path.resolve(__dirname, '../src/'),
}
},
optimization: {
// 生產環境默認啟用tree shaking
usedExports: true,
// 用於代碼分離
splitChunks: {
chunks: 'all'
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node-modules/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.vue$/,
use: [
'vue-loader'
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
outputPath: 'images/'
}
}
]
}
]
},
plugins: [
// 使用vue必要的plugins
new VueLoaderPlugin(),
// 自動生成index.html
new htmlWebpackPlugin({
template: 'public/index.html',
favicon: 'public/favicon.ico',
inject: true
})
]
};

最終打包結果。

webpack4配置手動搭建vue

home頁面

webpack4配置手動搭建vue

test頁面

webpack4配置手動搭建vue

至此,一個webpack簡單搭建的vue項目完成,還有很多的配置項去優化。webpack的配置項成千上萬,我需要做的是瞭解其常用的配置,然後摸索其它,遇到問題再去查詢解決。寫的不好的地方請大家留言指出。

相關文章

面試題整理—CSS部分

前端面試題—vue部分詳解

快速使用vuex

巧用flex搭建後臺系統架子