vue-cli 腳手架詳解

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

經過vue-cli構建的webpack-vue項目

npm install --global vue-cli
vue init webpack my-project
複製代碼

項目結構

• build build中是一些webpack的相關配置，包括基本配置、開發環境配置、生產環境配置等
• config 針對開發環境、生產環境、測試環境的配置信息
• node-modules package.json構建出的包
• src
  • assets 會被webpack處理
• static 不會被webpack處理 webpack打包後，此目錄下的文件會默認被複制到dist/static中，這是經過build.assetsPublicPath和buildSubDirectory來肯定的
• .babelrc 用來配置babel
• .editorconfig 在不一樣的編輯器和IDE之間定義和維護一致的代碼風格
• .gitignore git pull時候要忽略的文件
• .postcssrc.js 配置postcss .vue-loader的postcss會默認讀取這個文件
• index.html 入口文件
• package-lock.json 制定了每一個模塊及其每一個依賴項的版本位置和完整哈希。因此不管是用什麼設備（跨平臺）執行npm install 安裝的依賴都是相同的
• package.json 依賴
• README.MD 備註

---

build

webpack的相關配置，包括基本配置、開發環境配置、生產環境配置等

【webpack.base.conf.js 】

一些概念

__dirname：    得到當前執行文件所在目錄的完整目錄名
__filename：   得到當前執行文件的帶有完整絕對路徑的文件名
process.cwd()：得到當前執行node命令時候的文件夾目錄名 
./：           文件所在目錄
../：          文件所在的上級目錄
/：            文件所在的根目錄
複製代碼

path.dirname() 方法返回 path 的目錄名
path.dirname('/foo/bar/baz/asdf/quux');
// 返回: '/foo/bar/baz/asdf'
複製代碼

path.join([...paths])方法使用平臺特定的分隔符做爲定界符將全部給定的 path 片斷鏈接在一塊兒，而後規範化生成的路徑。
path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// 返回: '/foo/bar/baz/asdf'

path.join('foo', {}, 'bar');
// 拋出 'TypeError: Path must be a string. Received {}'
複製代碼

【webpack.base.conf.js】內容以下

const path = require('path'); //require是Node.js全局函數
const ROOT = path.dirname(__dirname); 
const SRC = path.join(ROOT, 'src');
const DIST = path.join(ROOT, 'dist');

module.exports = {
    entry: { //入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
        index: path.join(SRC, 'index', 'js', 'index.js'),
        payresult: path.join(SRC, 'payresult', 'js', 'index.js'),
        paysuccess: path.join(SRC, 'paysuccess', 'js', 'index.js')
    },
    output: { //output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你能夠經過在配置中指定一個 output 字段，來配置這些處理過程：
        filename: '[name].js',
        path: path.join(DIST),
        publicPath: '/',
    },
    //loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊,本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。
    //在更高層面，在 webpack 的配置中 loader 有兩個目標：test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。use 屬性，表示進行轉換時，應該使用哪一個 loader。例如{ test: /\.txt$/, use: 'raw-loader' }，當webpack編譯器碰到「在 require()/import 語句中被解析爲 '.txt' 的路徑」時，對它打包以前，先使用 raw-loader 轉換一下。」
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'less': 'vue-style-loader!css-loader!postcss-loader!less-loader',
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ //include 表示哪些目錄中的 .js 文件須要進行 babel-loader;exclude 表示哪些目錄中的 .js 文件不要進行 babel-loader 
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },
                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: "less-loader" // compiles Less to CSS
                    }
                ]
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
                loader: "file-loader"
            },
        ]
    },
    resolve: {//解析模塊的可選項
        alias: { // 模塊別名列表
            'vue$': 'vue/dist/vue.esm.js',
        }
    },
};
複製代碼

---

config

index.js

const path = require('path');

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: '',
        assetsPublicPath: './',
        productionSourceMap: true,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
    },
    dev: {
        env: require('./dev.env'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://api.bilibili.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/api'
                }
            },
            '/payplatform': {
                target: 'http://pay.bilibili.com',
                // target:'http://10.23.144.52:8101',
                changeOrigin: true,
                pathRewrite: {
                    '^/payplatform': '/payplatform'
                }
            },
            '/userAuth': {
                target: 'http://pay.bilibili.com',
                // target:'http://10.23.145.204:80',
                changeOrigin: true,
                pathRewrite: {
                    '^/userAuth': '/userAuth'
                }
            },
            '/paywallet': {
                target: 'http://pay.bilibili.com',
                // target:'http://10.23.144.14:8081',
                changeOrigin: true,
                pathRewrite: {
                    '^/paywallet': '/paywallet'
                }
            }
        }
    }
};
複製代碼

---

.postcssrc.js

postcss是一個平臺，這個平臺能夠開發一些插件來處理css。例如autoprefixer:爲css中的屬性添加瀏覽器特定的前綴；

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
        browsers: ["Android 4.0", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
    } //若是package.json有配置browserslist，autoprefixer會讀取package.json下的browserslist配置
  }
}
複製代碼

package.json配置browserslist

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
]
複製代碼

---

.editorconfig

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
複製代碼