教你用webpack搭一个vue脚手架[超详细讲解和注释!]
1.適用人群
1.對webpack知識有一定了解但不熟悉的同學.2.女同學!!!(233333....)2.目的
在自己對webpack有進一步了解的同時,也希望能幫到一些剛接觸webpack的同學. 腳手架已放上github,不想聽我啰嗦的同學可以直接去download或clone下來看哦.腳手架里都有詳細注釋!https://github.com/webfansplz...
覺得有幫助到你的同學給個star哈,也算是對我的一種支持!
3.腳手架結構
├── build 構建服務和webpack配置|—— build.js webpack打包服務|—— webpack.base.conf.js webpack基本通用配置|—— webpack.dev.conf.js webpack開發環境配置|—— webpack.prod.conf.js webpack生產環境配置 ├── config 構建項目不同環境的配置 ├── public 項目打包文件存放目錄 ├── index.html 項目入口文件 ├── package.json 項目配置文件 ├── static 靜態資源 ├── .babelrc babel配置文件 ├── .gitignore git忽略文件 ├── postcss.config.js postcss配置文件 ├── src 項目目錄|—— page 頁面組件目錄|—— router vue路由配置|—— store vuex配置|—— App.vue vue實例入口|—— main.js 項目構建入口4.配置npm scripts
4.1 生成package.json文件,配置npm scripts.
4.1.1 使用 npm init 命令,生成一個package.json文件!
npm init4.1.2 全局安裝webpack和webpack-dev-server
npm install webpack webpack-dev-server -g4.1.3 在項目目錄下安裝webpack和webpack-dev-server
npm install webpack webpack-dev-server -D4.1.4 進入package.json配置npm scripts命令
"scripts": {"dev": "webpack-dev-server --config build/webpack.dev.conf.js","start": "npm run dev","build": "node build/build.js"}通過配置以上命令:我們可以通過npm start/npm run dev在本地進行開發,scripts.dev命令解讀:通過webpack-dev-server命令 啟動build文件夾下webpack.dev.conf.js。也可以通過npm run build 打包項目文件進行線上部署.scripts.build命令解讀:通過node命令構建build文件夾下的build.js。命令的配置可以根據自己腳手架的配置文件位置和名稱不同修改哦!5.構建腳手架目錄
同學們可以通過自己的習慣和喜愛搭建自己的腳手架目錄,下面講解以上面腳手架結構為準!6.構建config/config.js
6.1 該文件主要用來配置構建開發環境和生產環境差異化的參數.
6.2
7.構建build/webpack.base.conf.js
7.1 此文件主要是webpack開發環境和生成環境的通用配置.
7.2
"use strict";//引入node path路徑模塊 const path = require("path"); //引入webpack生產環境配置參數 const prodConfig = require("../config").build;//拼接路徑 function resolve(track) {return path.join(__dirname, "..", track); } //資源路徑 function assetsPath(_path) {return path.join(prodConfig.staticPath, _path); }//webpack 基本設置module.exports = {//項目入口文件->webpack從此處開始構建!entry: path.resolve(__dirname, "../src/main.js"),//配置模塊如何被解析resolve: {//自動解析文件擴展名(補全文件后綴)(從左->右)// import hello from './hello' (!hello.js? -> !hello.vue? -> !hello.json)extensions: [".js", ".vue", ".json"],//配置別名映射alias: {// import Vue from 'vue/dist/vue.esm.js'可以寫成 import Vue from 'vue'// 鍵后加上$,表示精準匹配!vue$: "vue/dist/vue.esm.js","@": resolve("src"),utils: resolve("src/utils"),components: resolve("src/components"),public: resolve("public")}},module: {//處理模塊的規則(可在此處使用不同的loader來處理模塊!)rules: [//使用babel-loader來處理src下面的所有js文件,具體babel配置在.babelrc,主要是用來轉義es6{test: /\.js$/,use: {loader: "babel-loader"},include: resolve("src")},//使用url-loader(file-loader的一個再封裝)對引入的圖片進行編碼,此處可將小于8192字節(8kb)的圖片轉為DataURL(base64),//大于limit字節的會調用file-loader進行處理!//圖片一般發布后都是長緩存,故此處文件名加入hash做版本區分!{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: "url-loader",options: {limit: 8192,name: assetsPath("img/[name].[hash:8].[ext]")}}]} };8.構建 build/webpack.dev.conf.js
8.1 該文件主要用于構建開發環境
8.2
"use strict"; //引入node path路徑模塊 const path = require("path"); //引入webpack const webpack = require("webpack"); //引入webpack開發環境配置參數 const devConfig = require("../config").dev; //引入webpack基本配置 const baseConf = require("./webpack.base.conf"); //一個webpack配置合并模塊,可簡單的理解為與Object.assign()功能類似! const merge = require("webpack-merge"); //一個創建html入口文件的webpack插件! const HtmlWebpackPlugin = require("html-webpack-plugin"); //一個編譯提示的webpack插件! const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin"); //發送系統通知的一個node模塊! const notifier = require("node-notifier"); //將webpack基本配置與開發環境配置合并! const devConf = merge(baseConf, {//項目出口,webpack-dev-server 生成的包并沒有寫入硬盤,而是放在內存中!output: {//文件名filename: "[name].js",//html引用資源路徑,在dev-server中,引用的是內存中文件!publicPath: devConfig.publicPath},//生成sourceMaps(方便調試)devtool: devConfig.devtoolType,////啟動一個express服務器,使我們可以在本地進行開發!!!devServer: {//HMR控制臺log等級clientLogLevel: "warning",// 熱加載hot: true,//自動刷新inline: true,//自動打開瀏覽器open: true,//在開發單頁應用時非常有用,它依賴于HTML5 history API,如果設置為true,所有的跳轉將指向index.htmlhistoryApiFallback: true,//主機名host: devConfig.host,//端口號port: devConfig.port,//配置反向代理解決跨域proxy: devConfig.proxyTable,//為你的代碼進行壓縮。加快開發流程和優化的作用compress: true,// 在瀏覽器上全屏顯示編譯的errors或warnings。overlay: {errors: true,warnings: false},// 終端輸出的只有初始啟動信息。 webpack 的警告和錯誤是不輸出到終端的quiet: true},module: {//處理模塊的規則(可在此處使用不同的loader來處理模塊!)rules: [//使用vue-loader處理以vue結尾的文件!{test: /\.vue$/,loader: "vue-loader",options: devConfig.vueloaderConf},//使用vue-style-loader!css-loader!postcss-loader處理以css結尾的文件!{test: /\.css$/,use: ["vue-style-loader",{loader: "css-loader",options: {sourceMap: true}},{loader: "postcss-loader",options: {sourceMap: true}}]},//使用vue-style-loader!css-loader!postcss-loader處理以less結尾的文件!{test: /\.less$/,use: ["vue-style-loader",{loader: "css-loader",options: {sourceMap: true}},{loader: "less-loader",options: {sourceMap: true}},{loader: "postcss-loader",options: {sourceMap: true}}]}]},plugins: [//開啟HMR(熱替換功能,替換更新部分,不重載頁面!)new webpack.HotModuleReplacementPlugin(),//顯示模塊相對路徑new webpack.NamedModulesPlugin(),//編譯出錯時,該插件可跳過輸出,確保輸出資源不會包含錯誤!// new webpack.NoEmitOnErrorsPlugin(),//配置html入口信息new HtmlWebpackPlugin({title: "hello,xc-cli!",filename: "index.html",template: "index.html",//js資源插入位置,true表示插入到body元素底部inject: true}),//編譯提示插件new FriendlyErrorsPlugin({//編譯成功提示!compilationSuccessInfo: {messages: [`Your application is running here: http://${devConfig.host}:${devConfig.port}`]},//編譯出錯!onErrors: function(severity, errors) {if (severity !== "error") {return;}const error = errors[0];const filename = error.file.split("!").pop();//編譯出錯時,右下角彈出錯誤提示!notifier.notify({title: "xc-cli",message: severity + ": " + error.name,subtitle: filename || "",icon: path.join(__dirname, "xc-cli.png")});}})] }); module.exports = devConf;8.3 通過創建以上文件,并下載相應的依賴和創建項目入口,我們就可以通過npm run dev在本地開發vue項目啦!!!
9.創建 build/webpack.prod.conf.js
9.1 此文件主要用于構建生產環境的配置.
9.2
10. 創建 build/build.js
10.1 此文件是項目打包服務,用來構建一個全量壓縮包
10.2
10.3 創建好以上文件 我們就可以通過npm run build來打包我們的項目文件并部署上線啦。
11.大功告成!
通過以上步驟,一個spa版的vue腳手架就大功告成啦!
如果對一些細節不懂的可以留言或者上我的github查看
https://github.com/webfansplz...
最后還是那句話,如果有幫助到你,請給我star支持哈!
原文地址:https://segmentfault.com/a/1190000012736387
轉載于:https://www.cnblogs.com/lalalagq/p/9959906.html
總結
以上是生活随笔為你收集整理的教你用webpack搭一个vue脚手架[超详细讲解和注释!]的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JDBC_通过DriverManager
- 下一篇: 116-数学运算符更多的使用