摘要:基礎目錄結構以及各個文件的作用初始項目一路回車,一律使用默認的項目配置修改如下超級詳細的手寫配置來啟動項目附配置作用說明用來啟動命令這里將開發環境的配置傳入到啟動的中。
基礎目錄結構以及各個文件的作用 初始npm項目 npm init
一路回車,一律使用默認的npm項目配置
package.json修改scripts如下:
{ "name": "doing-a-webpack4-vue2-pro", "version": "1.0.0", "description": "超級詳細的手寫webpack4配置來啟動vue2項目(附配置作用)", "main": "index.js", "author": "", "license": "ISC", "scripts": { "dev": "webpack-dev-server --config webpack/webpack.dev.config.js" }, "engines": { "node": ">= 8.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
說明:書寫 webpack.dev.config.js
npm run dev 用來啟動命令 webpack-dev-server --config webpack/webpack.dev.config.js
這里將開發環境(development)的配置 webpack/webpack-dev-config.js 傳入到啟動的server config中。詳情
故這里需要做兩件事情:
a. npm install webpack-dev-server -D 開發依賴
b. 書寫 webpack.dev.config.js
說明:書寫 webpack.base.config.js webpack/webpack.base.config.js
由于 webpack.dev.config.js 與 webpack.prod.config.js 近似,所以手寫一個 webpack.base.config.js來減少配置耦合量。
提示:base.config與dev.config需要用webpack提供的 webpack-merge 來合并
故這里需要做兩件事情:
a. npm install webpack-merge -D 這個放到后面安裝config需要的依賴中一起做,稍后會寫到
b. 書寫 webpack.base.config.js
const path = require("path") const { VueLoaderPlugin } = require("vue-loader") const ifProd = process.env.NODE_ENV === "production" ? true : false const config = { dev: { mode: "development", assetsPublcPath: "/", assetsSubDirectory: "./" }, prod: { mode: "production", index: path.resolve(__dirname, "../dist/index.html"), assetsPublcPath: path.resolve(__dirname, "../dist"), assetsSubDirectory: "./" } } module.exports = { mode: ifProd ? "production" : "development", context: path.resolve(__dirname, "../"), entry: { app: "./src/main.js" }, output: { filename: "[name].bulde.[hash:10].js", path: ifProd ? config.prod.assetsPublcPath : config.dev.assetsPublcPath }, resolve: { extensions: [".js", ".vue"], }, devServer: { quiet: true }, module: { rules: [ { test: /.vue$/, use: [ { loader: "vue-loader", } ] }, { test: /.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: ["babel-preset-env"] } }, { test: /.css$/, use: ["vue-style-loader", "css-loader"] } ] }, plugins: [ new VueLoaderPlugin() ] }
我們可以看到,這里base.config需要的開發依賴有:回到 webpack.dev.config.js webpack/webpack.dev.config.js
babel-loader@7 (7.x版本需要配合 babel-core babel-preset-env)
webpack (4.x版本需要配合 webpack-cli)
css-loader (需要配合 vue-style-loader)
vue-loader (需要配合 vue-template-compiler)
故在命令行執行如下命令
npm install -D babel-loader@7 babel-core babel-preset-env webpack webpack-cli
npm install -D css-loader vue-style-loader vue-loader vue-template-compiler
詳細的配置說明解釋幾天后給出
const BaseConfig = require("./webpack.base.config") const merge = require("webpack-merge") const HtmlWebpackPlugin = require("html-webpack-plugin") module.exports = merge(BaseConfig, { plugins: [ // https://github.com/ampedandwired/html-webpack-plugin // 這是一個webpack的插件來創建html文件渲染你的webpack生成的bundle new HtmlWebpackPlugin({ // 寫入bundle的那個index.html filename: "index.html", template: "index.html" }) ] })
我們可以看到,這里dev.config需要的開發依賴有:可以開始寫vue啦! src/main.js
webpack-merge (前面提到的用來將dev.config和base.config合并的依賴)
html-webpack-plugin
故在命令行執行如下命令
npm install -D html-webpack-plugin webpack-merge
我們在上面的 webpack.base.config.js 中寫到了 entry: {app: "./src/main.js"}
這就是我們的vue入口了。如下:
import Vue from "vue"; // 引入vue import App from "./App"; // 引入組件App new Vue ({ el: "#app", // 掛載到index.html中的#app上 render: h => h (App) // 用App.vue渲染 })src/App.vue
簡單的一個首頁
Success
如上,我們需要引入vue,所以:最后 代碼結構: index.html
npm install vue -S (自動安裝2.x版本的vue)
運行項目doing
npm run dev源碼地址
具體的項目源碼地址:https://github.com/Sotyoyo/do...
源碼與本文章稍有出入,后期會做到統一,希望給個star支持一下!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53722.html
摘要:基礎目錄結構以及各個文件的作用初始項目一路回車,一律使用默認的項目配置修改如下超級詳細的手寫配置來啟動項目附配置作用說明用來啟動命令這里將開發環境的配置傳入到啟動的中。 基礎目錄結構以及各個文件的作用 showImg(https://segmentfault.com/img/remote/1460000018271585?w=538&h=284); 初始npm項目 npm init 一...
摘要:適用于主要入口頁面生成多頁,子頁面和次要頁面使用單頁形式的項目。文件用來存放固定的數據,而文件可更加自由的處理并返回數據。 VUE2的單頁應用框架有人分享了,多頁應用框架也有人分享了,這里分享一個單頁+多頁的混合應用框架吧,node.js寫了一個簡單的mock服務也集成在里面,整體初現雛形,還有很多需要優化和改善的地方。。。 項目結構 │ ├─build ...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 594·2021-11-18 13:12
閱讀 1314·2021-11-15 11:39
閱讀 2473·2021-09-23 11:22
閱讀 6194·2021-09-22 15:15
閱讀 3655·2021-09-02 09:54
閱讀 2310·2019-08-30 11:10
閱讀 3245·2019-08-29 14:13
閱讀 2913·2019-08-29 12:49