前言
距離上篇文章9102年webpack4搭建vue專案已經過了將近兩個月了，一直沒有時間寫文章，公司專案比較多，這兩個月一直在加班，所以呢，所以呢，直到今天才能給大家分享文章，想看上篇文章的同學點這裡juejin.im/post/5c665d…
好了廢話不多說開始擼程式碼。
1.新建資料夾
mkdir wepack-vue //檔名字可以隨便複製程式碼2.新建package.json檔案
npm init -y複製程式碼3.webpack配置
新建build資料夾
mkdir build複製程式碼build資料夾新建webpack.base.conf.js，webpack.dev.conf.js，webpack.prod.conf.js
- webpack.base.conf.js 存放公共配置
- webpack.prod.conf.js 存放生產環境配置
- webpack.dev.conf.js 存放開發環境配置
建立src資料夾並建立main.js
建立index.html
<!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>webpack搭建vue專案</title>
</head>
<body>
<div id="app"></div>
</body>
</html>複製程式碼下載webpack webpack-dev-server webpack-cli
npm i webpack webpack-dev-server webpack-cli -D複製程式碼開啟webpack.base.config.js，並配置webpack整體屬性
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
main: path.resolve(__dirname, '../src/main.js')
},
output: {
path: path.resolve(__dirname, '../src'),
filname: '[name].[bash].js',
},
module: {
rules: []
},
pligins: [
new webpack.HashedModuleIdsPlugin(), // 解決vender後面的hash每次都改變
],
resolve: {
}
}複製程式碼4.配置loader
- 下載babel-loader，babel-core，babel-preset-dev，rules並配置js
babel-preset-env 幫助我們配置 babel。我們只需要告訴它我們要相容的情況（目標執行環境），它就會自動把程式碼轉換為相容對應環境的程式碼。
babel-core是作為babel的核心存在，babel的核心api都在這個模組裡面
tips: babel是7.X的話babel-core必須是6.X，否則不相容
npm i babel-loader babel-core babel-preset-env@7 -D複製程式碼rules:[
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
}
]複製程式碼- 新建.babelrc檔案，.babelrc是babel全域性配置檔案
{
"preset": [
['env',{
"targets": {// 指定轉譯到那個環境
//瀏覽器環境
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
},
//是否將ES6的模組化語法轉譯成其他型別
"modules": false
}]
]
}複製程式碼- 下載file-loader，rules並配置檔案（圖片和字型）
npm i file-loader -D複製程式碼rules:[
{
test: /\.(jpg|png|svg|gif)$/,
use: ['file-loader']
},
{
test: '/\.(woff|woff2|eot|ttf|otf)$/',
use: ['file-loader']
},]複製程式碼- 下載css-loader，vue-style-loader，sass-loader， node-sass，並配置css，scss，sass
npm i css-loader vue-style-loader sass-loader node-sass -D複製程式碼rules:[
{
test: /\.(sa|sc|c)ss$/,
use: [
{loader: 'vue-style-loader'},
'css-loader',
'sass-loader'
]
},
]複製程式碼- 下載less，less-loader，並配置less
npm i less-loader less -D複製程式碼rules:[
{
test: /\.less$/,
use: [
{loader: 'vue-style-loader'},
'css-loader',
'less-loader'
]
},
]複製程式碼5.生成html檔案
- 下載html-webpack-plugin，並配置
npm i html-webpack-plugin -D複製程式碼// 引入html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__diename, '../index.html')
}),
]複製程式碼6.配置解析模組
resolve: {
// 能夠使使用者在引入模組時不帶擴充套件
extensions: ['.js', '.json', '.vue', 'css']
}複製程式碼base模組配置了一些東西但沒有配置完，會在後邊一點一點加上，接下來配置dev和prod
7.配置webpack.dev.conf
- 下載 webpack-merge
npm i webpack-merge -D複製程式碼- webpack.dev.js
var merge = require('webpack-merge');
var baseConfig = require('./webpack.base.conf');
var path = require('path');
var webpack = reuire('webpack');
module.exports = merge(baseConfig, {
devtool: 'inline-source-map', // 壓縮方式
mode: 'development'
devServer: {
hot: true, // 熱更新
open: true, // 自動開啟頁面
contentBase: path.resolve(__dirname, '../dist'), // 告訴服務從哪提供內容
},
plugins: [
new.webpack.HotModuleReplacementPlugin(), //開啟熱更新
]
})複製程式碼8.配置webpack.prod.conf
- webpack.prod.conf.js
var merge = require('webpack-merge');
var baseConfig = require('./webpack.base.conf');
var path = require('path');
var webpack = reuire('webpack');
module.exports = merge(baseConfig, {
devtool: 'source-map', // 壓縮方式
mode: 'production'
plugins: [
]
})複製程式碼9.配置vue-loader
- 下載vue-loader，vue，vue-template-compiler, 並配置vue解析檔案，配置webpack.base.cond.js
npm i vue vue-loader vue-template-compiler -D
複製程式碼var VueLoaderPlugin = require('vue-loader/lib/plugin');
// 省略程式碼......
rules:[
{
test: /\.vue$/,
use: ['vue-loader'],
exclude: /node_modules/
},
]
// 省略程式碼.......複製程式碼// 省略程式碼....
plugins: [
new VueLoaderPlugin(), // 它的職責是將你定義過的其它規則複製並應用到 .vue 檔案裡相應語言的塊
]
// 省略程式碼...複製程式碼- 配置vue別名，確保webpack可以找到.vue檔案
// 省略程式碼...
reslove: {
alias: [
'vue$': 'vue/dist/vue.esm.js', //配置別名 確保webpack可以找到.vue檔案
'@': path.resolve(__dirname, '../src')
]
}複製程式碼- 新建App.vue檔案
<template>
<div>{{str}}</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
str: 'hello'
}
}}
</script>
<style>
div {
color: red;
}
</style>
複製程式碼- 在main.js中引入vue
import VUe from 'vue'
import App from './App'
new Vue({
el: "#app",
render: (h) => h(App)
})複製程式碼10.配置命令
- 找到package.json檔案，並配置開發和打包命令
// 省略程式碼。。。
"scripts": {
"dev": "webpack-dev-server --progress --config build/webpack.dev.conf.js",
"build": "webpack --config build/webpack.prod.conf.js"
}複製程式碼- 執行專案
npm run dev複製程式碼可以看到專案已經跑起來了
11. 區分環境引入不同地址
- 新建config資料夾並新建dev.ev.js和prod.env.js
dev.env.js 開發環境配置
'use strict'
module.exports = {
NODE_ENV: '"development"',
BASE_API: '"http://1456"',
}複製程式碼prod.env.js 生產環境配置
'use strict'
module.exports = {
NODE_ENV: '"production"', BASE_API: '"http://123.com"',
}複製程式碼12.優化webpack配置
- 解決更改檔案打包時dist檔案沒有清除，再次打包。
下載clean-webpack-plugin，並配置webpack.prod.conf.js檔案
npm i clean-webpack-plugin -D複製程式碼// 引入clean-webpack-plugin
var CleanWebpackPlugin = require('clean-webpack-plugin');
// 省略程式碼。。。。
plugins: [
new CleanWebPackPlugin();
]複製程式碼- 根據不同環境提取css
下載mini-css-extract-plugin，並配置webpack.prod.conf.js檔案
npm i mini-css-extract-plugin -D複製程式碼更改webpack.prod.conf.js中使用vue-style-loader的程式碼，更改為
module: {
rules: [
{
test: /\.(c|sc|sa)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader'
]
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'less-loader'
]
}
]
},
複製程式碼在webpack.prod.conf.js的plugin中配置
new MiniCssExtractPlugin({
filename: '[name].[hash].js'
})複製程式碼webpack.base.conf.js中刪除使用vue-style-loader的程式碼，並在webpack.dev.conf.js中定義
module: {
rules: [
{
test: /\.(c|sc|sa)ss$/,
use: [
{
loader: 'vue-style-loader',
},
'css-loader',
'sass-loader'
]
},
{
test: /\.less$/,
use: [
{
loader: 'vue-style-loader',
},
'css-loader',
'less-loader'
]
}
]
},複製程式碼這個配置vue-loader中有提到vue-loader.vuejs.org/zh/guide/ex…
- 第三方庫單獨打包
把依賴的第三方庫抽取出來單獨打包，加快打包進度
下載autodll-webpack-plugin
npm i autodll-webpack-plugin -D複製程式碼在webpack.base.conf.js中配置
var AutodllWebpackpackPlugin = require('autodll-webpack-plugin');
plugins: [
new AutodllWebpackpackPlugin ({
inject: true,
debugger: true,
filename: '[name].js',
path: './dll',
entry: {
vendor: ['vue']
}
})
]複製程式碼tips: inject 為 true，外掛會自動把打包出來的第三方庫檔案插入到 HTML。filename 是打包後檔案的名稱。path 是打包後的路徑。entry 是入口，vendor 是你指定的名稱，陣列內容就是要打包的第三方庫的名稱，不要寫全路徑，Webpack 會自動去 node_modules 中找到的。- 提取公共程式碼
在 webpack.base.conf.js的 plugins 屬性中新增如下外掛物件
new webpack.optimize.SplitChunksPlugin()複製程式碼- 打包時壓縮js和css
下載optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin
npm i uglifyjs-webpack-plugin uglifyjs-webpack-plugin -D複製程式碼在webpack.prod.conf.js中分別引入optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin並增加optimization
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var UglifyJsPlugin = require("uglifyjs-webpack-plugin");
// ...省略號
optimization: {
minimizer: [
// 壓縮JS
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false, // 去除警告
drop_debugger: true, // 去除debugger
drop_console: true // 去除console.log
},
},
cache: true, // 開啟快取
parallel: true, // 平行壓縮
sourceMap: false // set to true if you want JS source maps
}),
// 壓縮css
new OptimizeCSSAssetsPlugin({})
]
},複製程式碼- css自動加字首
下載postcss-loader 和autoprefixer
npm i postcss-loader autoprefixer -D複製程式碼分別在webpack.dev.conf.js和webpack.prod.conf.js的use中新增postcss-loader
use: [
'postcss-loader'
]複製程式碼在專案下增加postcss.config.js
// 配置cssz加字首
module.exports = {
plugins: [
require('autoprefixer')
]
}複製程式碼以上配置的專案就可以跑起來了，謝謝大家，如有錯誤，敬請指出，一起在碼農的道路上越走越遠
感恩騙點star專案地址github.com/mr-mengbo/w…
佔位
下一篇會介紹vue搭建後臺專案