菜单

js_脚本之家,脚手架到掌握webpack配置澳门太阳娱乐手机登录

2020年3月27日 - 澳门太阳娱乐手机登录
js_脚本之家,脚手架到掌握webpack配置澳门太阳娱乐手机登录

此文章介绍vue-cli脚手架config目录下index.js配置文件

前言

还有几天就初一了,先在这里个大家拜个年,恭喜发财,新年好!!!

上一期我们对webpack的构建进行了改进,添加了babelrc和postcss编译器,还有把项目的构建能力适应了多页面开发。但是大家发现这个工程还不能算得上是一个脚手架,尤其是添加了多页面能力之后,每次添加页面都要手动添加插件配置,所以我们要进行一些简单的封装,达到通过简单配置进行统一设置配置的效果。

GitHub :
https://github.com/wwwjason1994/vue-cli-yourself

本期重点:对目前的项目进行简单的封装,简化项目配置难度

往期链接:

从搭建vue-脚手架到掌握webpack配置(一.基础配置)

从搭建vue-脚手架到掌握webpack配置(二.插件与提取)

从搭建vue-脚手架到掌握webpack配置(三.多页面构建)

1、此配置文件是用来定义开发环境和生产环境中所需要的参数

构思配置文件

首先我们要构思一下具体那些配置项是我们会经常用到的,而且会需要经常修改的。

新建一个config目录,在该目录下新建index.js文件

index.js的内容如下:

 const config = {
    page:{
        index:'./src/main.js',
        home: ['./src/home.js','home page']
    },
    defaultTitle:"this is all title",//页面的默认title
    externals : {//大三方外部引入库声明
        'jquery':'window.jQuery'
    },
    cssLoader : 'less',//记得预先安装对应loader
    // cssLoader : 'less!sass',//可以用!号添加多个css预加载器
    usePostCSS :  true, //需要提前安装postcss-loader
    toExtractCss : true,

    assetsPublicPath: '/',//资源前缀、可以写cdn地址
    assetsSubDirectory: 'static',//创建的的静态资源目录地址

    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,//调试开启时是否自动打开浏览器

    uglifyJs : true,//是否丑化js
    sourceMap : true,//是否开启资源映射
    plugins:[]//额外插件
}
module.exports = config;

注意:配置项中的路径都相对于跟目录

澳门太阳娱乐手机登录,当涉及到较复杂的解释我将通过标识的方式将解释写到单独的注释模块,请自行查看

配置项说明

page:就如webpack.config里面的entry,进行了改良,如果属性是数组的话,第二个参数是html的标题(title)

defaultTitle:是所有页面默认的title

externals:如注释

cssLoader:要使用的css预加载器,可以用!分割设置多个加载器,使用的同时记住npm install less-loader安装对应的loader

usePostCss:是否使用postcss,也是要预先安装post-loader

toExtractCss:是否抽取css文件

assetsPublicPath:资源的公共地址前缀,页面的所有资源引入会指向该地址,可以是一个cdn的域名。

assetsSubDirectory:要在根目录下创建一个static目录存放不被webpack编译的文件(静态文件),而assetsSubDirectory值是dist目录下的静态资源地址,如值是static的话,build之后,~static目录下的文件就会被复制到dist/static目录下

host port autoOpenBrower:如注释

uglifyJs sourceMap :如注释

plugins:可以new一些插件进去

// see http://vuejs-templates.github.io/webpack for documentation.// path是node.js的路径模块,用来处理路径统一的问题var path = requiremodule.exports = { // 下面是build也就是生产编译环境下的一些配置 build: { // 导入prod.env.js配置文件,只要用来指定当前环境,详细见 env: require, // 下面是相对路径的拼接,假如当前跟目录是config,那么下面配置的index属性的属性值就是dist/index.html index: path.resolve(__dirname, '../dist/index.html'), // 下面定义的是静态资源的根目录 也就是dist目录 assetsRoot: path.resolve, // 下面定义的是静态资源根目录的子目录static,也就是dist目录下面的static assetsSubDirectory: 'static', // 下面定义的是静态资源的公开路径,也就是真正的引用路径 assetsPublicPath: '/', // 下面定义是否生成生产环境的sourcmap,sourcmap是用来debug编译后文件的,通过映射到编译前文件来实现 productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin // 下面是是否在生产环境中压缩代码,如果要压缩必须安装compression-webpack-plugin productionGzip: false, // 下面定义要压缩哪些类型的文件 productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off // 下面是用来开启编译完成后的报告,可以通过设置值为true和false来开启或关闭 // 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量,可以自行设置 bundleAnalyzerReport: process.env.npm_config_report }, dev: { // 引入当前目录下的dev.env.js,用来指明开发环境,详见 env: require, // 下面是dev-server的端口号,可以自行更改 port: 8080, // 下面表示是否自定代开浏览器 autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', // 下面是代理表,作用是用来,建一个虚拟api服务器用来代理本机的请求,只能用于开发模式 // 详见 proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. // 是否生成css,map文件,上面这段英文就是说使用这个cssmap可能存在问题,但是按照经验,问题不大,可以使用 // 给人觉得没必要用这个,css出了问题,直接控制台不就完事了 cssSourceMap: false }}

整理项目配置

在config目录下放封装的配置逻辑脚本文件,新建一个static目录放静态资源,多出的几个文件后面会慢慢道来

澳门太阳娱乐手机登录 1

image

注释

按版本生成代码

以免多次build代码的时候都会覆盖上次的生成记录,我们可以做一个小优化,用package.json里的version值作为目录名在dist下生成如dist/1.0.0/的目录

澳门太阳娱乐手机登录 2

image

只要改一下output的值就能实现这一需求

output:{
        path:path.resolve(__dirname,'./dist/'+ process.env.npm_package_version),
        filename:"js/[name].js"
    },

process.env.npm_package_version能得到package.json里的version值,具体参考这里

在每次build之前按需要修改package.json里的version值就可以区分版本生成目录

下面是prod.env.js的配置内容

修改npm script

"scripts": {
    "clean": "node config/build.js",
    "build": "webpack --progress --hide-modules --config config/webpack.prod.conf.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
    "c-b": "npm run clean && npm run build"
  },

你会发现多了一个clean和c-b,而且build指向了一个新的文件
config/webpack.prod.conf.js,clean也运行了一个新的文件config/build.js。从名字能看出来clean是用来清理目录的,c-b是clean和build一起运行的

所以改完了npm script之后我们在config目录创建这两个文件吧。

config/webpack.prod.conf.js文件用于独立生成环境是用到的webpack配置项

config/build.js是清理逻辑。

module.exports = { // 作用很明显,就是导出一个对象,NODE_ENV是一个环境变量,指定production环境 NODE_ENV: '"production"' }

先清理目录

config/build.js内容如下:

'use strict'
process.env.NODE_ENV = 'production'

const rm = require('rimraf')
const path = require('path')
// const webpack = require('webpack')
// const webpackConfig = require('./webpack.prod.conf')


rm(path.resolve(__dirname,'../dist/'+ process.env.npm_package_version), err => {
  if (err) throw err
  // webpack(webpackConfig, (err, stats) => {
  //   if (err) throw err
  // })
})

就是简单地用node的rimraf组件删除当前版本的目录
为什么有一些注释的部分呢?
其实这些代码是从官方的vue-cli里面粘贴过来的,原本vue-cli默认是删除和webpack运行一起执行的,但是我发现这样做
一来没有了webpack --progress加载进度显示,二来要引入很多node插件来书写加载提示,三来clean和build一起执行太过绝对了。所以我把运行webpack的逻辑注释掉了,然后用npm
script里的build进行代替。

下面是dev.env.js的配置内容

独立生产环境配置

在上几期我们简单的用if (process.env.NODE_ENV === 'production')作为生产环境的判断,在webpack.config.js文件里面一起编写配置项。为了规范化和独立性,把if里的内容抽离到一个新的文件(config/webpack.prod.conf.js)里面,如下

process.env.NODE_ENV = 'production'
const path = require('path')
const config = require('../config')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require("../webpack.config.js")

const webpackConfig = merge(baseWebpackConfig, {
    devtool : '#source-map',
    output:{
        path:path.resolve(__dirname,'../dist/'+ process.env.npm_package_version),
        filename:"js/[name].[chunkhash].js",
        chunkFilename:"js/[id].[chunkhash].js",
        publicPath:config.assetsPublicPath || '/'
    },
    plugins :[
        new webpack.DefinePlugin({
            'process.env': {
            NODE_ENV: '"production"'
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        //提取多入库的公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks:2
        }),
        //抽取从node_modules引入的模块,如vue
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vender',
            minChunks:function(module,count){
                var sPath = module.resource;
                // console.log(sPath,count);
                return sPath &&
                    /.js$/.test(sPath) &&
                    sPath.indexOf(
                        path.join(__dirname, 'node_modules')
                    ) === 0
            }
        }),
        //将webpack runtime 和一些复用部分抽取出来
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks:Infinity
        }),
        //将import()异步加载复用的公用模块再进行提取
        new webpack.optimize.CommonsChunkPlugin({
            // name: ['app','home'],
            async: 'vendor-async',
            children: true,
            deepChildren:true,
            minChunks:2
        }),
    ]
})
if(config.uglifyJs){
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: config.sourceMap,
            compress: {
            warnings: false
            }
        }),
    ])
}
if(config.sourceMap){
    module.exports.devtool = false
}
module.exports = webpackConfig

process.env.NODE_ENV = 'production'首先声明当前是生成环境

const config = require('../config')引入了上面构思的配置项的配置文件

你会发现用到了webpack-merge插件(记得npm install --save-dev webpack-merge),顾名思义这是合并两个对象里面的webpack配置项的。

其他的就是生产代码时用到的公共块抽取插件、丑化js等插件,不清楚这些插件的可以翻回去看(二)和(三)期
还有重新配置了一下output的配置,主要是多了publicPath项,这是设置支援公用地址前缀的配置项。

 // 首先引入的是webpack的merge插件,该插件是用来合并对象,也就是配置文件用的,相同的选项会被覆盖,至于这里为什么多次一举,可能另有他图吧 var merge = require // 导入prod.env.js配置文件 var prodEnv = require // 将两个配置对象合并,最终结果是 NODE_ENV: '"development"' module.exports = merge(prodEnv, { NODE_ENV: '"development"' })

重点来了!

用配置项进行自动配置项目的魅力就在于,可以通过通俗易懂的配置规则得到配置复杂的webpack构建逻辑的效果。这也正正是考验一个程序员编程能力的地方,半自动或全自动的配置背后可是执行着你封装的逻辑脚本。

下面是proxyTable的一般用法

自动配置多入口

我们之前构思的配置项第一个page就是一个声明多入口,他类似wepack里的entry,每一项对应一个入口,也对应一个页面,如下就对应两个页面

page:{
        index:'./src/main.js',
        home: ['./src/home.js','home page']
    },

这可以说是半自动的配置方法,有的人会倾向于全自动的方法,就是通过查询给定的文件目录下包含的入口js文件自动生成入口配置,而不用像我这样手动声明用到的入口。感兴趣的可以参考这里:link

Jason做过不少的小程序开发,比较习惯明确的列出所包含的页面,所以更青睐这种半自动的配置方式。列明页面入口不仅方面深入添加自己想要的规则,而且可以通过该配置项知道本项目包含哪些页面。

vue-cli使用这个功能是借助http-proxy-middleware插件,一般解决跨域请求api

开始封装

config/index.js底下开始封装我们要的逻辑,当然你可以独立出一个新的文件。这里写到一起是因为,一方面考虑到入门教程的复杂性,另一方面我们可以在同一个文件下一遍对照配置项一遍封装逻辑。

 const config = {
    page:{
        index:'./src/main.js',
        home: ['./src/home.js','home page']
    },
    //...
}
module.exports = config;

/**
 * some auto-create-function
 */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isProduction = process.env.NODE_ENV === 'production'

//自动生成HTML模板
const createHTMLTamplate = function(obj){
    let htmlList = [];
    let pageList = obj;
    for(let key in pageList){
        htmlList.push(
            new HtmlWebpackPlugin({
                filename: key + '.html',
                title:Array.isArray(pageList[key])&&pageList[key][1]
                    ?pageList[key][1].toString()
                    :config.defaultTitle,
                template:path.resolve(__dirname,'../index.html'),
                chunks:[key,'vender','manifest','common'],
                chunksSortMode: 'dependency'
            })
        )
    }
    return htmlList
}
//设置多入口
const setEntry = function(obj){
    let entry = {};
    let pageList = obj;
    for(let key in pageList){
        if(Array.isArray(pageList[key]) && pageList[key][0]){
            entry[key] = path.resolve(__dirname,'../'+pageList[key][0].toString());
        }else{
            entry[key] = path.resolve(__dirname,'../'+pageList[key].toString());
        }
    }
    return entry
}

module.exports.plugins = (module.exports.plugins || []).concat(
    createHTMLTamplate(config.page)
);
module.exports.entry = setEntry(config.page);

有点编程能力的同学不难看懂这些逻辑。只是遍历page值里面的每一项,返回entry和html模板插件数组。注意一点就是这里用了Array.isArray(pageList[key]判断当前是否数组,作简单的值兼容。

还是那句,不懂HtmlWebpackPlugin看前两期 或者
看这里

createHTMLTamplate 返回对应配置项的HtmlWebpackPlugin插件列表

setEntry 返回入口chunk对象entry

 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', -> 目标url地址 changeOrigin: true, -> 指示是否跨域 pathRewrite: { '^/list': '/list' -> 可以使用 /list 等价于 api.xxxxxxxx.com/list } } }
回到webpack.config.js

然后我们返回到webpack.config.js文件把这些方法的然后值引用到对应的配置项上。留意注释~~~~我在这里~~~~

const path = require('path')
const config = require('./config')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

baseWebpackConfig = {
    entry:config.entry, //~~~~~~~~~我在这里~~~~~~~~
    output:{
        path:path.resolve(__dirname,'./dist/'+ process.env.npm_package_version),
        filename:"js/[name].js"
    },
    module:{
        rules:[
        //...
        ]
    },
    plugins:[
        new CopyWebpackPlugin([
            {
              from: path.resolve(__dirname, './static'),
              to: config.assetsSubDirectory,
            }
        ])
    ].concat(config.plugins),//~~~~~~~我在这里~~~~~~~
    resolve:{
        extensions: ['.js', '.vue', '.json'],
        alias:{
            'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
            '@': path.resolve(__dirname,'./src'),
        }
    },
    externals:config.externals,
}

module.exports = baseWebpackConfig;

当然还用到了很多其他的配置项,检查一下config关键字自己对号入座。

以上这篇vue-cli脚手架config目录下index.js配置文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

自动添加css预处理器

同样在config/index.js下面添加自动配置css预处理器的逻辑,下面贴出代码有点长,但是请一定细心看一下,有注释帮助理解,认真看下其实重点逻辑也就中间一部分

 const config = {
    //...

    cssLoader : 'less',//记得预先安装对应loader
    // cssLoader : 'less!sass',//可以用!号添加多个css预加载器
    usePostCSS :  true, //需要提前安装postcss-loader
    toExtractCss : true,

    //...
}
module.exports = config;

/**
 * some auto-create-function
 */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const ExtractRootCss = new ExtractTextPlugin({filename:'styles/root.[hash].css',allChunks:false});
const ExtractVueCss = new ExtractTextPlugin({filename:'styles/[name].[chunkhash].css',allChunks:true});

const isProduction = process.env.NODE_ENV === 'production'

//自动生成HTML模板
const createHTMLTamplate = function(obj){
    //...
}
//设置多入口
const setEntry = function(obj){
    //...
}
//设置样式预处理器
const cssRules = {
    less: {name:'less'},
    sass: {name:'sass', options:{indentedSyntax: true}},
    scss: {name:'sass'},
    stylus: {name:'stylus'},
    styl: {name:'stylus'}
}
//vue内嵌样式用到的配置规则
const cssLoaders = function(options){
    options = options || {}

    let loaders = {};
    const loaderList = options.loaders
    //判断样式是来自文件还是.vue文件内嵌,然后用对应的插件实例
    const ExtractCss = options.isRootCss ? ExtractRootCss : ExtractVueCss;
    const cssLoader = {
        loader: 'css-loader',
        options: {
            sourceMap: options.sourceMap
        }
    }//css-loader
    const postcssLoader = {
        loader: 'postcss-loader',
        options: {
            sourceMap: options.sourceMap
        }
    }
    //判断是否使用postcss
    const frontLoader = options.usePostCSS ? [cssLoader,postcssLoader]:[cssLoader]

    //出了less等预加载的loader之外,还一定要有一般css的编译
    if(loaderList.indexOf('css') === -1)loaderList.unshift("css")

    //遍历数组生成loader队列
    loaderList.forEach(element => {
        const loaderOptions = cssRules[element]&&cssRules[element].options
        let arr = element==="css" ? [] : [{
            loader: element+"-loader",
            options: Object.assign({}, loaderOptions, {
                sourceMap: options.sourceMap
            })
        }]
        //是否提取到css文件
        if(options.Extract){
            loaders[element] = ExtractCss.extract({
                use: frontLoader.concat(arr),
                fallback: 'vue-style-loader' 
            })
        }else{
            loaders[element] = ['vue-style-loader'].concat(frontLoader,arr)
        }
    });
    //是否提取到css文件
    if(options.Extract){
        module.exports.plugins = (module.exports.plugins || []).concat([ExtractRootCss,ExtractVueCss]);
    }

    return loaders
}
//样式文件用到的配置规则
const styleLoaders = function(options){
    options.isRootCss = true;
    let output = [];
    const loaders = cssLoaders(options);

    for (const extension in loaders) {
        let loader = loaders[extension]
        output.push({
          test: new RegExp('\.' + extension + '$'),
          use: loader
        })
    }
    return output
}

module.exports.plugins = (module.exports.plugins || []).concat(
    createHTMLTamplate(config.page)
);
module.exports.entry = setEntry(config.page);
module.exports.styleLoaders = styleLoaders({
    loaders: config.cssLoader.split('!'),
    sourceMap : config.sourceMap,
    usePostCSS : config.usePostCSS,
    Extract : isProduction&&config.toExtractCss,//生成环境才判断是否进行提取
});
module.exports.cssLoaders = cssLoaders({
    loaders: config.cssLoader.split('!'),
    sourceMap : config.sourceMap,
    //vue-loader内部自动开启postcss所以开发环境下会有警告,所以也是生成环境才进行进一步判断
    usePostCSS : isProduction&&config.usePostCSS,
    Extract : isProduction&&config.toExtractCss,
});

有看过vue-cli内部封装的代码(没看过也没关系)的同学可能会发现以上的代码有点像vue-cli里面的逻辑。Jason确实借鉴了一点vue-cli的封装思想。

cssRules
:该对象是预先设定好不同预加载的名称很options配置项。我们会发现同一种css处理器也会有不一样的规则和后缀名(就如sass和scss),构思的配置项里面很难一一列出,那么我们就要借助这里对象进行区分。后期有什么需要添加的options配置也可以在cssRules的第二个参数中添加。

cssLoaders:生成cssloader队列的方法,同时可以直接赋值到vue-loader内的规则里面。返回值如下

{
    css:[vue-style-loader,css-loader],
    less:[vue-style-loader,css-loader,less-loader]
}

styleLoaders:该方法则是匹配对应css处理器后缀名文件的配置规则。

细心的同学会留意到cssLoaders和styleLoaders,在对是否使用postcss时候多出
isProduction判断。因为
vue-loader内部自动开启postcss所以开发环境下会有警告,所以也是生成环境才进行进一步判断是否开启postcss。

再回到webpack.config.js
baseWebpackConfig = {
    //...
    module:{
        rules:[
            {
                test:/.js$/,
                loader:"babel-loader",
                exclude:/node_modules/
            },
            {
                test:/.(png|jpe?j|gif|svg)(?.*)?$/,
                loader:'url-loader',
                options:{
                    limit:10000,
                    name:'img/[name].[ext]?[hash]'
                }
            },
            {
                test:/.(woff2?|eot|ttf|otf)(?.*)?$/,
                loader:"url-loader",
                options:{
                    limit:10000,
                    name:'fonts/[name].[ext]?[hash]'
                }
            },
            {
                test:/.vue$/,
                loader:'vue-loader',
                options:{
                    loaders: config.cssLoaders //~~~~~~~我在这里~~~~~~~
                }
            },
        ].concat(config.styleLoaders) //~~~~~~~我在这里~~~~~~~
    },

    //...
}
module.exports = baseWebpackConfig;

好了到现在半自动化的封装逻辑都写好了,下面选取一些需要注意的配置进行介绍。

其他配置项

host port autoOpenBrower

host port autoOpenBrower
这些和开发服务器相关的配置项,以前引入到webpack.config.js里面。

webpack.config.js下面添加代码(你也可以想vue-cli一样再独立一个文件webpack.dev.conf.js),如下

const path = require('path')
const config = require('./config')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

baseWebpackConfig = {
    entry:config.entry,
    //...
}
if (process.env.NODE_ENV === 'development') {
    console.log(process.env.NODE_ENV);
    baseWebpackConfig = merge(baseWebpackConfig,{
        devtool : '#eval-source-map',
        devServer : {
            clientLogLevel: 'warning',
            historyApiFallback: true,
            hot: true,
            compress: true,
            host: HOST || config.host,
            port: PORT || config.port,
            open: config.autoOpenBrowser,
            publicPath:config.assetsPublicPath || '/'
        },
        plugins : [
            new webpack.DefinePlugin({
                'process.env': {
                NODE_ENV: '"development"'
                }
            }),
            new webpack.HotModuleReplacementPlugin()
        ]
    })
}
module.exports = baseWebpackConfig;

显然,host和port都可以被process.env.PORTHOST
覆盖。其他devServer配置项可以参考
官方文档

有一点要注意,HotModuleReplacementPlugin插件一定要在开启webpack-dev-server的时候才调用,所以要独立在该开发环境判断中。

assetsSubDirectory

一开始构思配置项的时候对该属性有介绍

assetsSubDirectory值是dist目录下的静态资源地址,如值是static的话,build之后,~static目录下的文件就会被复制到dist/static目录下

而实现文件复制的插件是 CopyWebpackPlugin,使用前记得install

    new CopyWebpackPlugin([
            {
              from: path.resolve(__dirname, './static'),
              to: config.assetsSubDirectory,
            //   ignore: ['.*']
            }
        ])
assetsPublicPath

该项是地址前缀,如果用到了第三方配置资源的地址,那么这里就可以填写对应的域名。

开发环境中它在

devServer : {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.host,
    port: PORT || config.port,
    open: config.autoOpenBrowser,
    publicPath:config.assetsPublicPath || '/'
},

生成环境中它在

output:{
    path:path.resolve(__dirname,'../dist/'+ process.env.npm_package_version),
    filename:"js/[name].[chunkhash].js",
    chunkFilename:"js/[id].[chunkhash].js",
    publicPath:config.assetsPublicPath || '/'
}

其他配置项都浅而易懂,不多解释,当然你可以发挥自己的创造力添加更多自己需要的配置项。

运行一下

运行清理并构建

npm run c-b

得到的如下结果

澳门太阳娱乐手机登录 3

image

完整的项目、webapck.config.js、config/index.js等文件可以下载或者克隆本项目的github

GitHub :
https://github.com/wwwjason1994/vue-cli-yourself

总结

整个系列学习编写vue脚手架的过程到这里算是得到了一个比较完整的入门,从一开始入门webpack的配置项、到引入常用插件实现文件抽离、再到适配多页面多入口、最终对项目进行自动化的封装。

不知不觉差不多实现vue官方给出的vue-cli里面的大部分能力,是不是发现自己不再是webpack的小白,还挺有成就感呢。

我们在整个学习的过程中有很多借鉴vue-cli的思想和规范。可能有人会说自己写这么麻烦干嘛,直接用vue-cli不就行了吗?此言差矣,这不仅是一个学习webpack的过程,更是学会因地制宜按项目的实际情况构建工程的过程。而且能让我们深入体会工程化和自动化的思想。

Jason的一些话

前段时间工作有点忙,而且广州寒气逼人下班都懒得动了,停更了差不多有一个月,虽然等更新的人不多,但是真的要跟有关注的同学说一声对不起。开始放假而且天气暖和了才把这一期码完,请大家原谅,也希望大家不要学我这个重度拖延症患者一样懒。

后面该码什么文章呢?

Jason写的这些文章文笔不怎么好,但都是以和大家一起学习一门技术为初衷在写,Jason相信有意去入门webpack的同学看完了这一系列的文章肯定对webpack有了更多的了解。

Jason后面会复习一下es6+ 和
想去深入学习一下node,还会写一些vue的项目。后面要写什么文章可能就看哪方面积累和了解的更深入,还有哪些内容跟适合总结成文章了。

大家有什么想和Jason一起学习的前端框架、技术,可以留言哦,欢迎给意见和交流。

后面会不定期更新,喜欢的同学可以点下关注的。

参考

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图