????當前前端開發，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

歡迎學習webpack4.42知識

{{title}}

export default { name:'app', data(){ return { title:'Hello Vue' } } } .app{ text-align: center; }

創建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即可打包代碼：

開啟本地服務：

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

拷貝圖片到public下面

在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代碼即可編譯運行。

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

總結

以上是生活随笔為你收集整理的react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。