├── build  構(gòu)建服務(wù)和webpack配置
 |—— build.js webpack打包服務(wù)
 |—— webpack.base.conf.js webpack基本通用配置
 |—— webpack.dev.conf.js webpack開發(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  頁面組件目錄
 |—— router  vue路由配置
 |—— store  vuex配置
 |—— App.vue  vue實(shí)例入口
 |—— main.js  項(xiàng)目構(gòu)建入口

npm init

npm install webpack webpack-dev-server -g

npm install webpack webpack-dev-server -D

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

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 開發(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
});
//開發(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"
 }
};

"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從此處開始構(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'可以寫成 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來處理模塊！)
 rules: [
 //使用babel-loader來處理src下面的所有js文件,具體babel配置在.babelrc,主要是用來轉(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ā)布后都是長緩存,故此處文件名加入hash做版本區(qū)分!
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: "url-loader",
 options: {
 limit: 8192,
 name: assetsPath("img/[name].[hash:8].[ext]")
 }
 }
 ]
 }
};

"use strict";
//引入node path路徑模塊
const path = require("path");
//引入webpack
const webpack = require("webpack");
//引入webpack開發(fā)環(huán)境配置參數(shù)
const devConfig = require("../config").dev;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一個(gè)webpack配置合并模塊,可簡單的理解為與Object.assign()功能類似！
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基本配置與開發(fā)環(huán)境配置合并！
const devConf = merge(baseConf, {
 //項(xiàng)目出口,webpack-dev-server 生成的包并沒有寫入硬盤,而是放在內(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)行開發(fā)！??！
 devServer: {
 //HMR控制臺(tái)log等級(jí)
 clientLogLevel: "warning",
 // 熱加載
 hot: true,
 //自動(dòng)刷新
 inline: true,
 //自動(dòng)打開瀏覽器
 open: true,
 //在開發(fā)單頁應(yīng)用時(shí)非常有用，它依賴于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)行壓縮。加快開發(fā)流程和優(yōu)化的作用
 compress: true,
 // 在瀏覽器上全屏顯示編譯的errors或warnings。
 overlay: {
 errors: true,
 warnings: false
 },
 // 終端輸出的只有初始啟動(dòng)信息。 webpack 的警告和錯(cuò)誤是不輸出到終端的
 quiet: true
 },
 module: {
 //處理模塊的規(guī)則(可在此處使用不同的loader來處理模塊！)
 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: [
 //開啟HMR(熱替換功能,替換更新部分,不重載頁面！)
 new webpack.HotModuleReplacementPlugin(),
 //顯示模塊相對(duì)路徑
 new webpack.NamedModulesPlugin(),
 //編譯出錯(cuò)時(shí),該插件可跳過輸出,確保輸出資源不會(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;

"use strict";
//引入node path路徑模塊
const path = require("path");
//引入webpack
const webpack = require("webpack");
//一個(gè)webpack配置合并模塊,可簡單的理解為與Object.assign()功能類似！
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來處理模塊！)
 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,在最開始加載一次,便緩存使用,用于提升速度!
 // 1. 第三方庫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ù)依賴引入chunk
 chunksSortMode: "dependency"
 })
 ]
});
module.exports = prodConf;

"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"
 )
 );
 });
});