vue-cli 脚手架详解

涨月薪
2,214 阅读4分钟

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
  • 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
avatar
文章
阅读
粉丝