1、項(xiàng)目文件目錄下 npm init -y 創(chuàng)建package.json文件##

2、創(chuàng)建文件+目錄##

根目錄下創(chuàng)建index.html、webpack.config.js 、src目錄、并在src目錄下創(chuàng)建App.vue、 main.js文件
index.html就是html:5生成的，div上有id="app"，這個(gè)id是main.js上用于綁定的
main.js的代碼如下

import Vue from 'vue'
import App from './App.vue'
 
new Vue({
  render: h => h(App),
}).$mount('#app')

3、安裝依賴（loader、plugin、依賴）##

1)webpack相關(guān)
webpack webpack-cli webpack-dev-server(是配置devServer用的)
2)vue
3)安裝瀏覽器識(shí)別.vue文件的loader
vue-loader 和 vue-template-compiler
vue-loader 15版本以上必須增加插件部分
let VueLoaderPlugin = require('vue-loader/lib/plugin')
new VueLoaderPlugin(),
4)處理css的loader
//處理.scss、.less、.css文件
vue-style-loader和style-loader二選一
二者區(qū)別：vue-style-loader是在style-loader上改的，都會(huì)創(chuàng)建了一個(gè) style 標(biāo)簽，然后直接插入到了 head 標(biāo)簽中，但是 vue-style-loader 除了插入 style 外，還做了一些服務(wù)端渲染的支持，所以如果你的 vue 項(xiàng)目是需要支持服務(wù)端渲染的時(shí)候，就需要用到 vue-style-loader。
vue-loader里依賴了vue-style-loader，所以vue-style-loader不安裝可以使用
css-loader
postcss-loader（瀏覽器增加前綴）
sass-loader（依賴node-sass）
less-loader （依賴less）
stylus-loader
5)處理圖片的loader
url-loader、file-loaderurl-loader就是基于file-loader的，小圖是url，大圖是file-loader
html-withimg-loader（針對(duì)于.html中的img引入的靜態(tài)路徑，不支持.vue文件）
6)css默認(rèn)增加前綴的loader postcss-scss
根目錄增加文件postcss.config.js
module.exports = {
parser: 'postcss-scss',
"plugins": [
require('autoprefixer')
]
};
7)處理es6兼容babel-loader
{
test: /.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
},
根目錄創(chuàng)建.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
8)html插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
template:'./index.html',
minify:false
})
9)clean-webpack-plugin(再次打包時(shí)刪除之前打包內(nèi)容)
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
new CleanWebpackPlugin(),
10)從js中提取css插件
webpack4x不支持extract-text-webpack-plugin
所以使用mini-css-extract-plugin'
style-loader用MiniCssExtractPlugin.loader替換
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename: 'css/h.css',
})
還可以增加性能優(yōu)化的配置

4、配置webpack.config.js##

除了上面的配置內(nèi)容外
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
'@': path.resolve(__dirname, '../src'),
vue$: "vue/dist/vue.esm.js",
assets: path.resolve(__dirname, "../src/assets"),
img: path.resolve(__dirname, "../src/assets/img"),
components: path.resolve(__dirname, "../src/components"),
pcService: path.resolve(__dirname, "../src/view/management/service"),
utils: path.resolve(__dirname, "../src/utils"),
enum: path.resolve(__dirname, "../src/enum")
}
},
devServer:{
//運(yùn)行代碼的目錄
contentBase:resolve(__dirname,"../dist"),
//端口號(hào)
port:3000,
open:true,
hot:true,
}

5、package.json中歷史配置##

// "scripts": {
// "build": "webpack",
// "start": "webpack-dev-server"
// },
// "scripts": {
// "dev":"webpack-dev-server --config ./webpack.dev.js", //不生成dist文件夾
// "build":"webpack --config ./webpack.prod.js" //生成dist文件夾
// },

6、合并公用文件##

image.png

base是dev和prod環(huán)境提取的共同部分，dev和prod分別通過webpack-merge進(jìn)行合并
//記得更改文件路徑
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},