使用WebPack從0搭建乙個基本Vue專案

2021-10-07 02:36:18 字數 2227 閱讀 4333

執行 npm install webpack webpack-cli –d 命令,安裝 webpack 相關的包

在專案根目錄中,建立名為 webpack.config.js 的 webpack 配置檔案

在 webpack 的配置檔案中,初始化如下基本配置:

module.exports =

;

在 package.json 配置檔案中的 scripts 節點下,新增 dev 指令碼如下:

"scripts"

:,

如果要修改打包的入口與出口,可以在 webpack.config.js 中新增如下配置資訊:

執行 npm install webpack-dev-server –d 命令,安裝支援專案自動打包的工具

修改 package.json -> scripts 中的 dev 命令如下:

將 public -> index.html 中,script 指令碼的引用路徑,修改為 "/buldle.js「

執行 npm run dev 命令,重新進行打包

執行 npm install html-webpack-plugin –d 命令,安裝生成預覽頁面的外掛程式

修改 webpack.config.js 檔案頭部區域,新增如下配置資訊:

修改 webpack.config.js 檔案中向外暴露的配置物件,新增如下配置節點:

配置自動打包相關的引數

執行 npm i style-loader css-loader -d 命令,安裝處理 css 檔案的 loader

在 webpack.config.js 的 module -> rules 陣列中,新增 loader 規則如下:

module:

]}

執行 npm i less less-loader -d 命令, 安裝處理less檔案的loader

在 webpack.config.js 的 module -> rules 陣列中,新增 loader 規則如下:

執行 npm i postcss-loader autoprefixer -d 命令

在專案根目錄中建立 postcss 的配置檔案 postcss.config.js,並初始化如下配置

在 webpack.config.js 的 module -> rules 陣列中,修改 css 的 loader 規則如下:

執行 npm i url-loader file-loader -d 命令

在 webpack.config.js 的 module -> rules 陣列中,新增 loader 規則如下:

runtime @babel/plugin-proposal-class-properties –d

在專案根目錄中,建立 babel 配置檔案 babel.config.js 並初始化基本配置如下:

在 webpack.config.js 的 module -> rules 陣列中,新增 loader 規則如下:

執行 npm i vue-loader vue-template-compiler -d 命令

在 webpack.config.js 配置檔案中,新增 vue-loader 的配置項如下:

在入口檔案main.js 中 import匯入vue

new 例項化vue ,將其掛載到 index.html 的

import vue from

"vue";;

newvue()

.$mount()

;

安裝express框架

安裝compression

將dist資料夾拉進來

const express =

require

("express");

const compression =

require

('compression'

)express()

;use

(compression()

)use

(express.

static

('./dist'))

listen(80

);

使用Webpack搭建乙個最基本的React環境

npm init包名隨意 填寫好之後一路按回車,直到資料夾內生成 package.json 檔案,在與package.json同級的目錄下新建乙個資料夾用於新建專案 由於node.js會自下而上的找包,所以我們把包安裝在最外層 也就是package.json同級目錄 讓node.js自己去找包,這樣...

使用webpack4搭建乙個基於Vue的元件庫

組內負責的幾個專案都有一些一樣的公共元件,所以就著手搭建了個公共元件開發腳手架,第一次開發 library,所以是參考著 iview 的配置來搭建的。記錄如何使用webpack4搭建乙個library的腳手架。webpack4 搭建 vue 專案 使用 webpack4,需要安裝 webpack 和...

使用Django從零搭建乙個小型站點

建立乙個基本的project,這樣我們才能開始工作 django admin startproject 工程名 將所有靜態資源全部放入templates,得到的檔案結構如下 外鏈轉存失敗 img oaixjbvi 1566125816335 home floyd config typora typo...