1.首先安裝各個模塊所需要的依賴

• npm init -y? 初始化package.json文件 。

? ? ?以下所有安裝命令的 ‘-D‘? 代表安裝在該文件的devDependencies中
? ? ?npm的文檔說明：dependencies是運行時依賴，devDependencies是開發時的依賴

• npm i webpack webpack-cli webpack-dev-server webpack-merge -D

? ? ? webpack可以看做是模塊打包機。webpack-cli封裝了與CLI處理相關的所有代碼。它捕獲選項并將它們發送到webpack編譯器。webpack-dev-server是webpack官方提供的一個小型express服務器, 為webpack打包生成的資源文件提供web服務。webpack-merge是和用來區分兩個不同的環境

• npm i cross-env -D

? ? ? 可以跨平臺設置環境變量

• npm i @babel/core babel-loader @babel/preset-env -D

? ? ? @babel/core是轉譯器本身，提供了babel的轉譯API。babel-loader就是調用這些API來完成轉譯js過程的。Babel 7宣布廢棄babel-preset-es201x而采用新的env插件

• npm i @babel/runtime-corejs2?@babel/plugin-transform-runtime -D

? ? ? Babel默認只轉換新的JavaScript句法，而不轉換新的API。需要在入口加載@babel/polyfill插件來轉換，但是這種方式是通過向全局對象和內置對象的prototype上添加方法實現的，會造成全局變量污染，因此在babel7.x版本中，@babel/polyfill不再受歡迎。而是@babel/runtime-corejs2（它是babel7 中 @babel/polyfill 的別名）結合@babel/plugin-transform-runtime使用， 可避免全局污染。

? ? ? 在轉換 ES2015 語法為 ECMAScript 5 的語法時，babel 會需要一些輔助函數，例如 _extend。babel 默認會將這些輔助函數內聯到每一個 js 文件里，這樣文件多的時候，項目就會很大。所以 babel 提供了 transform-runtime 來將這些輔助函數“搬”到一個單獨的模塊 babel-runtime 中，這樣做能減小項目文件的大小。

• npm i @babel/plugin-proposal-decorators -D

? ? ? 將類和對象裝飾器編譯為ES5

• npm i @babel/plugin-syntax-dynamic-import -D （在babel7.x中似乎并不需要再進行單獨安裝）

? ? ?允許解析import() 延遲加載，懶加載

• npm i @babel/plugin-proposal-optional-chaining -D

? ? ?可以訪問深層嵌套的屬性，可以不用邏輯與去判斷? ? // const baz = obj?.foo?.bar?.baz

注意： babel7.0后，已經不再使用@babel/preset-stage-x的預設了, 所需的插件都需要單獨去安裝配置，根據公司的項目需要，可以選擇性的去配置 ：@babel/plugin-***? ? 這里不做過多贅述。

• npm i vue-loader vue-template-compiler -D

? ? ? ?解析vue文件需要安裝這兩個插件

• npm i uglifyjs-webpack-plugin -D

? ? ? ?用來在生產環境壓縮js

• npm i css-loader sass node-sass sass-loader postcss-loader autoprefixer mini-css-extract-plugin optimize-css-assets-webpack-plugin -D

? ? ? ?css-loader處理css，用來解析@import這種語法。sass-loader將sass語言轉換成css， postcss-loader 和 autoprefixer用來為css的樣式自動添加瀏覽器前綴，mini-css-extract-plugin是提取css文件，不再以style標簽存放，而是創建link標簽引入，所以不再需要style-loader。optimize-css-assets-webpack-plugin用來壓縮css

• npm i url-loader file-loader -D

? ? ? ?url-loader打包圖片資源，file-loader打包字體等資源

• npm i html-webpack-plugin clean-webpack-plugin copy-webpack-plugin -D

? ? ? ?html-webpack-plugin用來打包時自動生成html文件，clean-webpack-plugin打包時會自動清除dist，copy-webpack-plugin用來拷貝靜態資源到打包目錄

安裝完上述依賴之后，需要根據自己的安裝去配置.babelrc(babel的配置文件)和postcss.config.js。這里直接附上我自己的配置僅供參考。如下：

• .babelrc

{"presets": ["@babel/preset-env"],"plugins": [["@babel/plugin-transform-runtime", {"corejs": 2}],["@babel/plugin-proposal-decorators",{"legacy": true}],"@babel/plugin-proposal-optional-chaining"] } 復制代碼

• postcss.config.js

module.exports = { plugins: [require('autoprefixer') ] }復制代碼

2. webpack公共文件配置 ：webpack.base.config.js

let path = require('path') let MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取css公共文件 let { VueLoaderPlugin } = require('vue-loader') //vue-loader 15.x版本以后需要引入 let HtmlWebpackPlugin = require('html-webpack-plugin') //自動生成html let CopyWebpackPlugin = require('copy-webpack-plugin') //拷貝靜態資源 let { CleanWebpackPlugin } = require('clean-webpack-plugin') //打包前清除dist let webpack = require('webpack')module.exports = {entry: [ path.resolve(__dirname, '../src/main.js') ],output: {filename: 'js/[name].[hash:8].js', //打包后的js文件放在js目錄下，添加hash值防止緩存chunkFilename: 'js/[name].[hash:8].js', // 配合按需加載路由來使用，用來修改打包后的各個JS模塊文件名字，具體請看下方打包后的截圖path: path.resolve(__dirname, '../dist'), //輸出的目錄publicPath: '/' //靜態資源cdn的地址},stats: { // 本地起服務或者打包時候，清除過多的日志信息，精簡控制臺信息。modules: false,children: false,chunks: false,chunkModules: false},module: { //轉換規則rules: [{test: /\.vue$/,exclude: /node_modules/,use: ['vue-loader']},{test: /\.js$/,exclude: /node_modules/,use: ['babel-loader']},{test: /\.(css|scss|sass)$/, use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader']},{test: /\.(png|jpe?g|svg|gif)$/,use: [{loader: 'url-loader',options: {limit: 20 * 1024 // 不設置這個的話，打包后的圖片默認是超過8k時，會以base64編碼name: 'images/[name].[hash:8].[ext]'}}]},{test:/\.(woff|woff2|eot|ttf|otf)$/,use: [{loader: 'file-loader',options: {name: 'fonts/[name].[hash:8].[ext]'}}]},]},resolve: {extensions: ['.vue', '.js', '.scss', '.json'],// 能夠使用戶在引入模塊時不帶擴展名字, 自動解析alias: { //別名，方便快速查找模塊'@': path.resolve(__dirname, '../src')}},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({filename: 'index.html',template: path.resolve(__dirname, '../index.html'),title: '這是自定義的名字，請隨意',hash: true,minify: {removeAttributeQuotes: true, //刪除屬性的引號collapseWhitespace: true //刪除空白符與折疊行}}),new CleanWebpackPlugin(),new CopyWebpackPlugin([{from: path.resolve(__dirname, '../src/assets'),to: path.resolve(__dirname, '../dist/copyAssets')}]),new MiniCssExtractPlugin({filename: 'css/[name].[hash:8].css'}),new webpack.ProgressPlugin() //顯示打包進度的插件] } 復制代碼

3.webpack開發環境配置 ：webpack.dev.config.js

let webpack = require('webpack') let path = require('path') let merge = require('webpack-merge') let base = require('./webpack.base.config')module.exports = merge(base, {mode: 'development', // 定義環境變量devtool: 'cheap-module-eval-source-map',devServer: {port: 8000, //設置端口progress: true,// 控制臺顯示HDM進度hot: true, // 啟用熱更新open: true, // 自動打開瀏覽器historyApiFallback: true,contentBase: path.resolve(__dirname, '../dist'),proxy: {'/api': { //url中匹配到'/api', 就會把'/api'之前的東西全部替換成targettarget: '', // 目標服務器hostchangeOrigin: true, // 表示要改變原始hostsecure: false, // 默認請求的服務是https的, 并且證書是未認證的，所以需要關閉安全檢測。clentLogLevel: 'none', //當使用內聯模式(inline mode)時，會在開發工具(DevTools)的控制臺(console)顯示消息，例如：在重新加載之前，在一個錯誤之前，或者 模塊熱替換(Hot Module Replacement) 啟用時。默認值是 info。pathRewrite: {'^/api': '' // 重寫請求，源訪問地址中包含'/api'的將會替換為空}}}},plugins: [new webpack.HotModuleReplacementPlugin(), //熱更新插件new webpack.NamedChunksPlugin() // 使用此插件熱更新時控制臺會顯示模塊的相對路徑] })復制代碼

4.webpack生產環境配置 ：webpack.prod.config.js

let merge = require('webpack-merge') let base = require('./webpack.base.config') let UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')module.exports = merge(base, {mode: 'production',devtool: 'cheap-module-source-map',optimization: {minimizer: [new UglifyjsWebpackPlugin({ // 生產環境壓縮JScache: true, //是否否啟用緩存parallel: true, //多通道并行處理sourceMap: false, //生產環境關閉源碼映射uglifyOptions: {warnings: false, //清除警告compress:{drop_debugger: true, // 清除deguggerdrop_console: true //清除所有的console信息}}}),new OptimizeCssAssetsPlugin() // 生產環境壓縮css],splitChunks: { //用于拆分代碼，找到 chunk 中共同依賴的模塊進行“提取”和“分離”到單獨的文件中，減少打包后體積，可以避免內存溢出的問題。chunks: 'all'}},performance: { // webpack 的性能提示hints: 'warning', // 顯示警告信息maxEntrypointSize: 5 * 1024 * 1024, // 設置入口文件的最大體積為5M （以字節為單位）maxAssetSize: 20* 1024 * 1024, // 設置輸出文件的最大體積為20M （以字節為單位）assetFilter (assetFilename) { // 提供資源文件名的斷言函數return assetFilename.endsWith('.js') || assetFilename.endsWith('.css')}} }) 復制代碼

4.最后一步

在package.json文件的scripts中添加如下，然后執行npm run build即可打包

"serve": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.config.js", "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.config.js" 復制代碼

5.總結

? ? ? ?以上配置是采用webpack4.x+babel7.x版本，自行配置時請注意版本兼容問題。如果您想要升級項目到babel7.0, 文檔中也提供了一個升級工具：執行 npx babel-upgrade--write--install一鍵安裝babel7.0所需要的所有配置，并且會自動將配置寫入package.json和.babelrc文件中。詳情請參考文檔說明。以下是打包后的截圖：

copyAssets是拷貝的靜態資源。為什么打包后的js會有0**，2** 這么幾個文件呢？這是因為我vue的路由使用了按需加載，每個頁面都生成自己單獨的js。等需要的時候，才會去加載這些js的。但是這個0， 1， 2，...等等的文件名字默認是以id命名的，這看起來不友好，而且不太方便排錯，所以需要在引入路由時候，需要使用特殊的注釋語法來提供webpackChunkName，配合output里面設置的chunkFilename: 'js/[name].[hash:8].js'?來修改文件名，代碼如下：

export default new Router({mode: 'history',routes: [{path: '',redirect: '/Home'},{path: '/Home',name: 'Home',component: () => import(/* webpackChunkName: 'Home' */ '@/view/Home')},{path: '/Hello',name: 'Hello',component: () => import(/* webpackChunkName: 'Hello' */ '@/view/Hello')}] })復制代碼

最終打包后的結果如下，看看，這就舒服多了~

轉載于:https://juejin.im/post/5d2070ea6fb9a07f06558e77

總結

以上是生活随笔為你收集整理的手把手教你webpack4.x从零开始搭建vue项目的全部內容，希望文章能夠幫你解決所遇到的問題。

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