利用webpack搭一個(gè)vue腳手架的示例

這篇文章將為大家詳細(xì)講解有關(guān)利用webpack搭一個(gè)vue腳手架的示例，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一.適用人群

   對(duì)webpack知識(shí)有一定了解但不熟悉的同學(xué).

二.目的

在自己對(duì)webpack有進(jìn)一步了解的同時(shí),也希望能幫到一些剛接觸webpack的同學(xué).

腳手架已放上github,不想聽(tīng)我啰嗦的同學(xué)可以直接去download或clone下來(lái)看哦.

腳手架里都有詳細(xì)注釋?zhuān)?br/>

源碼：https://github.com/webfansplz/xc-cli.git  （本地下載）

覺(jué)得有幫助到你的同學(xué)給個(gè)star哈,也算是對(duì)我的一種支持！

三.腳手架結(jié)構(gòu)

├── build  構(gòu)建服務(wù)和webpack配置
 |—— build.js webpack打包服務(wù)
 |—— webpack.base.conf.js webpack基本通用配置
 |—— webpack.dev.conf.js webpack開(kāi)發(fā)環(huán)境配置
 |—— webpack.prod.conf.js webpack生產(chǎn)環(huán)境配置
├── config  構(gòu)建項(xiàng)目不同環(huán)境的配置
├── public  項(xiàng)目打包文件存放目錄
├── index.html  項(xiàng)目入口文件
├── package.json 項(xiàng)目配置文件
├── static  靜態(tài)資源
├── .babelrc  babel配置文件
├── .gitignore  git忽略文件
├── postcss.config.js postcss配置文件
├── src  項(xiàng)目目錄
 |—— page  頁(yè)面組件目錄
 |—— router  vue路由配置
 |—— store  vuex配置
 |—— App.vue  vue實(shí)例入口
 |—— main.js  項(xiàng)目構(gòu)建入口

四.配置npm scripts

4.1 生成package.json文件,配置npm scripts.

4.1.1 使用 npm init 命令,生成一個(gè)package.json文件!

npm init

4.1.2 全局安裝webpack和webpack-dev-server

npm install webpack webpack-dev-server -g

4.1.3 在項(xiàng)目目錄下安裝webpack和webpack-dev-server

npm install webpack webpack-dev-server -D

4.1.4 進(jìn)入package.json配置npm scripts命令

 "scripts": {
 "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
 "start": "npm run dev",
 "build": "node build/build.js"
 }

  通過(guò)配置以上命令：

  我們可以通過(guò)npm start/npm run dev在本地進(jìn)行開(kāi)發(fā),

  scripts.dev命令解讀:

  通過(guò)webpack-dev-server命令 啟動(dòng)build文件夾下webpack.dev.conf.js。

  也可以通過(guò)npm run build 打包項(xiàng)目文件進(jìn)行線上部署.

  scripts.build命令解讀：

  通過(guò)node命令構(gòu)建build文件夾下的build.js。

  命令的配置可以根據(jù)自己腳手架的配置文件位置和名稱(chēng)不同修改哦！

五.構(gòu)建腳手架目錄

同學(xué)們可以通過(guò)自己的習(xí)慣和喜愛(ài)搭建自己的腳手架目錄,下面講解以上面腳手架結(jié)構(gòu)為準(zhǔn)！

六.構(gòu)建config/config.js

6.1 該文件主要用來(lái)配置構(gòu)建開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境差異化的參數(shù).

6.2

const _path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//vue-loader基本配置
const baseVueLoaderConf = {
 //引入postcss插件
 postcss: {
 config: {
 path: _path.resolve("../")
 }
 },
 //轉(zhuǎn)為require調(diào)用,讓webpack處理目標(biāo)資源!
 transformToRequire: {
 video: "src",
 source: "src",
 img: "src",
 image: "xlink:href"
 }
};
//vue-loader 開(kāi)發(fā)環(huán)境配置
const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: {
 css: ["vue-style-loader", "css-loader"],
 less: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"]
 },
 cssSourceMap: true
});
//vue-loader 生產(chǎn)環(huán)境配置
const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: ExtractTextPlugin.extract({
 use: ["css-loader", "postcss-loader", "less-loader"],
 fallback: "vue-style-loader"
 }),
 cssSourceMap: false
});
//開(kāi)發(fā)/生產(chǎn)環(huán)境 配置參數(shù)！
module.exports = {
 dev: {
 publicPath: "/",
 devtoolType: "cheap-module-eval-source-map",
 vueloaderConf: devVueLoaderConf,
 host: "localhost",
 port: "1234",
 proxyTable: {}
 },
 build: {
 publicPath: "/",
 devtoolType: "source-map",
 vueloaderConf: buildVueLoaderConf,
 staticPath: "static"
 }
};

七.構(gòu)建build/webpack.base.conf.js

7.1 此文件主要是webpack開(kāi)發(fā)環(huán)境和生成環(huán)境的通用配置.

7.2

"use strict";
//引入node path路徑模塊
const path = require("path");
//引入webpack生產(chǎn)環(huán)境配置參數(shù)
const prodConfig = require("../config").build;
//拼接路徑
function resolve(track) {
 return path.join(__dirname, "..", track);
}
//資源路徑
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//webpack 基本設(shè)置
module.exports = {
 //項(xiàng)目入口文件->webpack從此處開(kāi)始構(gòu)建！
 entry: path.resolve(__dirname, "../src/main.js"),
 //配置模塊如何被解析
 resolve: {
 //自動(dòng)解析文件擴(kuò)展名(補(bǔ)全文件后綴)(從左->右)
 // import hello from './hello' （!hello.js? -> !hello.vue? -> !hello.json）
 extensions: [".js", ".vue", ".json"],
 //配置別名映射
 alias: {
 // import Vue from 'vue/dist/vue.esm.js'可以寫(xiě)成 import Vue from 'vue'
 // 鍵后加上$,表示精準(zhǔn)匹配！
 vue$: "vue/dist/vue.esm.js",
 "@": resolve("src"),
 utils: resolve("src/utils"),
 components: resolve("src/components"),
 public: resolve("public")
 }
 },
 module: {
 //處理模塊的規(guī)則(可在此處使用不同的loader來(lái)處理模塊！)
 rules: [
 //使用babel-loader來(lái)處理src下面的所有js文件,具體babel配置在.babelrc,主要是用來(lái)轉(zhuǎn)義es6
 {
 test: /\.js$/,
 use: {
 loader: "babel-loader"
 },
 include: resolve("src")
 },
 //使用url-loader(file-loader的一個(gè)再封裝)對(duì)引入的圖片進(jìn)行編碼,此處可將小于8192字節(jié)(8kb)的圖片轉(zhuǎn)為DataURL(base64),
 //大于limit字節(jié)的會(huì)調(diào)用file-loader進(jìn)行處理！
 //圖片一般發(fā)布后都是長(zhǎng)緩存,故此處文件名加入hash做版本區(qū)分!
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: "url-loader",
 options: {
 limit: 8192,
 name: assetsPath("img/[name].[hash:8].[ext]")
 }
 }
 ]
 }
};

八.構(gòu)建 build/webpack.dev.conf.js

8.1 該文件主要用于構(gòu)建開(kāi)發(fā)環(huán)境

8.2

"use strict";
//引入node path路徑模塊
const path = require("path");
//引入webpack
const webpack = require("webpack");
//引入webpack開(kāi)發(fā)環(huán)境配置參數(shù)
const devConfig = require("../config").dev;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一個(gè)webpack配置合并模塊,可簡(jiǎn)單的理解為與Object.assign()功能類(lèi)似！
const merge = require("webpack-merge");
//一個(gè)創(chuàng)建html入口文件的webpack插件！
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一個(gè)編譯提示的webpack插件！
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
//發(fā)送系統(tǒng)通知的一個(gè)node模塊！
const notifier = require("node-notifier");
//將webpack基本配置與開(kāi)發(fā)環(huán)境配置合并！
const devConf = merge(baseConf, {
 //項(xiàng)目出口,webpack-dev-server 生成的包并沒(méi)有寫(xiě)入硬盤(pán),而是放在內(nèi)存中！
 output: {
 //文件名
 filename: "[name].js",
 //html引用資源路徑,在dev-server中,引用的是內(nèi)存中文件！
 publicPath: devConfig.publicPath
 },
 //生成sourceMaps(方便調(diào)試)
 devtool: devConfig.devtoolType,
 //
 //啟動(dòng)一個(gè)express服務(wù)器,使我們可以在本地進(jìn)行開(kāi)發(fā)?。?！
 devServer: {
 //HMR控制臺(tái)log等級(jí)
 clientLogLevel: "warning",
 // 熱加載
 hot: true,
 //自動(dòng)刷新
 inline: true,
 //自動(dòng)打開(kāi)瀏覽器
 open: true,
 //在開(kāi)發(fā)單頁(yè)應(yīng)用時(shí)非常有用，它依賴(lài)于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html
 historyApiFallback: true,
 //主機(jī)名
 host: devConfig.host,
 //端口號(hào)
 port: devConfig.port,
 //配置反向代理解決跨域
 proxy: devConfig.proxyTable,
 //為你的代碼進(jìn)行壓縮。加快開(kāi)發(fā)流程和優(yōu)化的作用
 compress: true,
 // 在瀏覽器上全屏顯示編譯的errors或warnings。
 overlay: {
 errors: true,
 warnings: false
 },
 // 終端輸出的只有初始啟動(dòng)信息。 webpack 的警告和錯(cuò)誤是不輸出到終端的
 quiet: true
 },
 module: {
 //處理模塊的規(guī)則(可在此處使用不同的loader來(lái)處理模塊！)
 rules: [
 //使用vue-loader處理以vue結(jié)尾的文件！
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: devConfig.vueloaderConf
 },
 //使用vue-style-loader!css-loader!postcss-loader處理以css結(jié)尾的文件！
 {
 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結(jié)尾的文件！
 {
 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: [
 //開(kāi)啟HMR(熱替換功能,替換更新部分,不重載頁(yè)面！)
 new webpack.HotModuleReplacementPlugin(),
 //顯示模塊相對(duì)路徑
 new webpack.NamedModulesPlugin(),
 //編譯出錯(cuò)時(shí),該插件可跳過(guò)輸出,確保輸出資源不會(huì)包含錯(cuò)誤!
 // 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}`
 ]
 },
 //編譯出錯(cuò)！
 onErrors: function(severity, errors) {
 if (severity !== "error") {
 return;
 }
 const error = errors[0];
 const filename = error.file.split("!").pop();
 //編譯出錯(cuò)時(shí),右下角彈出錯(cuò)誤提示！
 notifier.notify({
 title: "xc-cli",
 message: severity + ": " + error.name,
 subtitle: filename || "",
 icon: path.join(__dirname, "xc-cli.png")
 });
 }
 })
 ]
});
module.exports = devConf;

8.3 通過(guò)創(chuàng)建以上文件,并下載相應(yīng)的依賴(lài)和創(chuàng)建項(xiàng)目入口,我們就可以通過(guò)npm run dev在本地開(kāi)發(fā)vue項(xiàng)目啦?。?！

九.創(chuàng)建 build/webpack.prod.conf.js

9.1 此文件主要用于構(gòu)建生產(chǎn)環(huán)境的配置.

9.2

"use strict";
//引入node path路徑模塊
const path = require("path");
//引入webpack
const webpack = require("webpack");
//一個(gè)webpack配置合并模塊,可簡(jiǎn)單的理解為與Object.assign()功能類(lèi)似！
const merge = require("webpack-merge");
//引入webpack生產(chǎn)環(huán)境配置參數(shù)
const prodConfig = require("../config").build;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一個(gè)創(chuàng)建html入口文件的webpack插件！
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一個(gè)抽離出css的webpack插件！
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//一個(gè)壓縮css的webpack插件！
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//一個(gè)拷貝文件的webpack插件！
const CopyWebpackPlugin = require("copy-webpack-plugin");

//資源路徑
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//將webpack基本配置與生產(chǎn)環(huán)境配置合并！
const prodConf = merge(baseConf, {
 //項(xiàng)目出口配置
 output: {
 //Build后所有文件存放的位置
 path: path.resolve(__dirname, "../public"),
 //html引用資源路徑,可在此配置cdn引用地址！
 publicPath: prodConfig.publicPath,
 //文件名
 filename: assetsPath("js/[name].[chunkhash].js"),
 //用于打包require.ensure(代碼分割)方法中引入的模塊
 chunkFilename: assetsPath("js/[name].[chunkhash].js")
 },
 //生成sourceMaps(方便調(diào)試)
 devtool: prodConfig.devtoolType,
 module: {
 //處理模塊的規(guī)則(可在此處使用不同的loader來(lái)處理模塊！)
 rules: [
 //使用vue-loader處理以vue結(jié)尾的文件！
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: prodConfig.vueloaderConf
 },
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 },
 {
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "less-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 }
 ]
 },
 plugins: [
 //每個(gè)chunk頭部添加hey,xc-cli!
 new webpack.BannerPlugin("hey,xc-cli"),
 //壓縮js
 new webpack.optimize.UglifyJsPlugin({
 parallel: true,
 compress: {
 warnings: false
 }
 }),
 //分離入口引用的css,不內(nèi)嵌到j(luò)s bundle中!
 new ExtractTextPlugin({
 filename: assetsPath("css/[name].[contenthash].css"),
 allChunks: false
 }),
 //壓縮css
 new OptimizeCSSPlugin(),
 //根據(jù)模塊相對(duì)路徑生成四位數(shù)hash值作為模塊id
 new webpack.HashedModuleIdsPlugin(),
 //作用域提升,提升代碼在瀏覽器執(zhí)行速度
 new webpack.optimize.ModuleConcatenationPlugin(),
 //抽離公共模塊,合成一個(gè)chunk,在最開(kāi)始加載一次,便緩存使用,用于提升速度!
 // 1. 第三方庫(kù)chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "vendor",
 minChunks: function(module) {
 //在node_modules的js文件!
 return (
  module.resource &&
  /\.js$/.test(module.resource) &&
  module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
 );
 }
 }),
 // 2. 緩存chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "manifest",
 minChunks: Infinity
 }),
 // 3.異步 公共chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "app",
 children: true,
 // (選擇所有被選 chunks 的子 chunks)
 async: true,
 // (創(chuàng)建一個(gè)異步 公共chunk)
 minChunks: 3
 // (在提取之前需要至少三個(gè)子 chunk 共享這個(gè)模塊)
 }),
 //將整個(gè)文件復(fù)制到構(gòu)建輸出指定目錄下
 new CopyWebpackPlugin([
 {
 from: path.resolve(__dirname, "../static"),
 to: prodConfig.staticPath,
 ignore: [".*"]
 }
 ]),
 //生成html
 new HtmlWebpackPlugin({
 filename: path.resolve(__dirname, "../public/index.html"),
 template: "index.html",
 favicon: path.resolve(__dirname, "../favicon.ico"),
 //js資源插入位置,true表示插入到body元素底部
 inject: true,
 //壓縮配置
 minify: {
 //刪除Html注釋
 removeComments: true,
 //去除空格
 collapseWhitespace: true,
 //去除屬性引號(hào)
 removeAttributeQuotes: true
 },
 //根據(jù)依賴(lài)引入chunk
 chunksSortMode: "dependency"
 })
 ]
});
module.exports = prodConf;

十. 創(chuàng)建 build/build.js

10.1 此文件是項(xiàng)目打包服務(wù),用來(lái)構(gòu)建一個(gè)全量壓縮包

10.2

"use strict";
//node for loading
const ora = require("ora");
// rm-rf for node
const rm = require("rimraf");
//console for node
const chalk = require("chalk");
//path for node
const path = require("path");
//webpack
const webpack = require("webpack");
//webpack production setting
const config = require("./webpack.prod.conf");
//指定刪除的文件
const rmFile = path.resolve(__dirname, "../public/static");
//build start loading
const spinner = ora("building for production...");
spinner.start();
//構(gòu)建全量壓縮包！
rm(rmFile, function(err) {
 if (err) throw err;
 webpack(config, function(err, stats) {
 spinner.stop();
 if (err) throw err;
 process.stdout.write(
 stats.toString({
 colors: true,
 modules: false,
 children: false,
 chunks: false,
 chunkModules: false
 }) + "\n\n"
 );
 if (stats.hasErrors()) {
 console.log(chalk.red(" Build failed with errors.\n"));
 process.exit(1);
 }
 console.log(chalk.cyan(" Build complete.\n"));
 console.log(
 chalk.yellow(
 " Tip: built files are meant to be served over an HTTP server.\n" +
  " Opening index.html over file:// won't work.\n"
 )
 );
 });
});

10.3 創(chuàng)建好以上文件 我們就可以通過(guò)npm run build來(lái)打包我們的項(xiàng)目文件并部署上線啦。

關(guān)于“利用webpack搭一個(gè)vue腳手架的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。