????當前前端開發，90%的項目都是Vue和React，然而70%的同學都基于腳手架創建項目，因為腳手架會包含項目基本框架、webpack配置、scss/sass/less解析、babel配置、DevServer、JSX/Vue文件解析、CSS前綴等，我們要做的就是開發功能模塊，也就是開箱即用。

????如果不用腳手架，我們怎么編寫配置？此文章要求對Vue/React有一點基礎.

技術文檔：

Webpack:?https://www.webpackjs.com/

Vue:?https://cn.vuejs.org/

React:?https://react.docschina.org/

開發環境

IDE推薦VSCode、瀏覽器推薦Chrome/Edge、Node版本：v12.13.0

創建項目

# 進入工作空間cd workspace#?創建項目mkdir?webpack-demo?(window用戶直接右鍵創建)# 進入到項目中cd webpack-demo#?初始化配置(默認一路回車)npm?init

打開項目

創建目錄

node_modules：項目依賴目錄，提前創建是為了添加gitignore

public：Vue項目靜態目錄，仿Vue4.0腳手架

src：項目源碼

.gitignore：忽略Git提交文件

初始化為Git項目(方便管理)

#?終端下執行git init

編寫代碼(基礎部分直接上代碼)

index.html

# public下index.html            Vue    

main.js

#?main.js入口import Vue from 'vue'import App from './app.vue'new Vue({    el:'#app',    render:(h)=>h(App)})

app.vue

創建Webpack配置

webpack默認配置：webpack.config.js，不建議修改名字

前端常用規范：AMD、CMD、CommonJS、ES，webpack遵循的是CommonJS規范，需要使用module.export導出。

打包基本配置

# webpack4.42版本，內容講解module.exports = {??? mode:'development',//指定環境，生成：production????entry:'./src/main.js',//項目入口????//項目輸出????output:{????????// [name]指原名字?????????// [hash]會生成hash串添加在name后面????    filename:'[name].[hash].js',????    // 打包輸出目錄????????//__dirname是node語法，指當前目錄意思????    path:__dirname+'/dist',????????//?根路徑默認/，用在打包后的js/css上面????    publicPath:'/',????    // 打包模塊名稱????    library:'webpack-demo',????????//?打包模塊方式，umd實際上是AMD+CMD混合????    libraryTarget:'umd'????}}

通過library設置后如下：

注：以上代碼只是打包的基礎配置，只能打包原生JS，還不能編譯Vue項目。

安裝依賴

???? 分析Vue文件，我們會發現，包含ES6、.vue、scss語法所以我們需要安裝對應插件。

開發Vue項目，必然需要安裝Vue

cnpm?i?vue?-S#?OR cnpm install vue --save

--save 和 --save-dev區別：save會保存在dependencies里面，save-dev會保存在devDependencies里面，項目生產依賴用save，項目開發依賴用dev.

安裝loader

# vue-loader 解析.vue文件vue-loader vue-template-compiler# 解析scss/sass語法node-sass?sass-loader#?添加樣式前綴?postcss-loader autoprefixer# 把scss/less轉換為csscss-loader#?把css轉化為style樣式style-loader#?解析ES6語法(必須安裝三個)@babel/core @babel/preset-env babel-loader#?解析圖片(file-loader增強版)url-loader?file-loader# 安裝到dev依賴中cnpm i vue-loader vue-template-compiler node-sass sass-loader postcss-loader autoprefixer css-loader style-loader @babel/core @babel/preset-env babel-loader url-loader file-loader -D

以上是針對本次Vue項目所需要安裝的插件和loader

/** * webpack4.42版本，內容講解 * module可以設置模塊解析規則和loader * test 校驗規則 * use 加載loader，從右往左 * exclude 排除目錄 * include 包含目錄 */module.exports = {??//?mode、entry、output參考上面  module:{        rules:[            {                test:/\.css$/,                use:['style-loader','css-loader','postcss-loader'],                exclude:/node_modules/,                include:/src/            },{                test:/\.vue$/,                loader:'vue-loader',                exclude:/node_modules/,                include:/src/            },{                test:/\.(js|.jsx)$/,                loader:'babel-loader',                exclude:/node_modules/,                include:/src/            },{                test:/\.(png|jpg|gif|svg)$/,                use:{                    loader:'url-loader',                    options:{????????????????????????//?10k以下用base64????????????????????????limit:10                    }                },                exclude:/node_modules/            },{                test:/\.(scss|sass)$/,                use:['style-loader','css-loader','postcss-loader','sass-loader'],                exclude:/node_modules/,                include:/src/            }        ]????}}

安裝webpack

# 打包必須webpack webpack-cli # 啟動本地服務器webpack-dev-server# 安裝到開發依賴中cnpm?i?webpack?webpack-cli?webpack-dev-server -D

安裝webpack-plugin

#?清空文件夾clean-webpack-plugin# html抽取打包html-webpack-plugin# 復制插件copy-webpack-plugin# 安裝到開發依賴中cnpm?i?clean-webpack-plugin?html-webpack-plugin?copy-webpack-plugin?-D

webpack-plugin配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');const VueLoaderPlugin = require('vue-loader/lib/plugin');const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {    // mode/entry/output/module參考上面    plugins:[        // 打包前清空目錄        new CleanWebpackPlugin(),        // 解析Vue需要配合插件使用        new VueLoaderPlugin(),        // 復制public內容到dist里面去????????//?vuecli4.0會生成public文件夾，里面包含index.html和靜態資源????????// 此處通過復制插件，在打包時，將public全部拷貝過去        new CopyWebpackPlugin([            {                from : __dirname + '/public',                to : __dirname + '/dist',                ignore: ['.*']            }        ]),????????//?html打包插件，會自動把js插入進去        new HtmlWebpackPlugin({            template:'public/index.html'        }),????]}

DevServer配置

// 通過本地服務器訪問Vue項目module.exports = {  devServer:{        // 服務根目錄        contentBase:__dirname+"/dist",        // 服務主機        host:'localhost',        // 服務端口        port:8080,        // 代碼熱更新        hot:true,        // 默認打開瀏覽器        open:true,        // 默認打開的頁面        openPage:'index.html',        // 接口代理，作用相當大        proxy:{            "/api":{????????????????target:"http://lemall.futurefe.com"            }        }    }}

到此我們完成了大部分代碼規則的配置，接下來，我們需要再添加兩個小配置：.babelrc和postcss

創建.babelrc文件

{    "presets":[        "@babel/preset-env",        "@babel/preset-react"    ]}

注：Vue項目使用第一個，React項目使用第二個

@babel/preset-env?是 Vue babel插件

@babel/preset-react?是 React babel插件

添加postcss配置

通常有些項目會使用postcss.config.js，我們這兒推薦修改package.json，添加對應配置。

打開package.json，添加如下代碼：

"postcss": {  "plugins": {    "autoprefixer": {}  }},"browserslist": [  "> 1%",  "last 2 versions"]

到此我們的項目全部配置完成，接下來，就添加運行腳本：

在scripts里面增加build和serve

"scripts": {    // 生產打包    "build": "webpack",    // 本地啟動服務????"serve":?"webpack-dev-server"  },

OK，接下來，運行cnpm run build即可打包代碼：

開啟本地服務：

最后，我們嘗試添加圖片代碼，看看是否能解析：

1. 拷貝圖片到public下面

2. 在app.vue中添加img標簽

<div class="app">    <h1>歡迎學習webpack4.42知識h1>    <p>{{title}}p>    <p>歡迎關注：前端未來，關乎你的未來p>    <img src="/imgs/qrcode.jpg" alt="">div>

項目會自動熱更新，截圖如下：

代碼已上傳Github，有需要的同學，可自行下載：

https://github.com/JackySoft/webpack-demo

同樣，大家可以模仿此文章打包React項目，React項目本身是jsx語法，通過babel-loader解析即可，代碼基本不動，大家只需要添加React代碼即可編譯運行。

關注前端，關注未來，關乎你的未來