autoprefixer 用于给css加前缀, cssnano 用于压缩优化css
从目录可以看到, 将webpack文件分为三个, webpack.base.js 用于通用配置, webpack.dev.js 用于配置开发模式, webpack.prod.js 用于配置生产模式, 开发模式和生产模式的配置文件通过之前安装的 webpack-merge 来将通用配置合并进来
通用配置, 主要是对基本的图片文件和CSS的加载配置
开发模式主要是对 webpack-dev-server 进行配置, 开发服务的端口, 代理配置等
生产模式, 主要是对JS, CSS进行压缩, 对文件进行分片
https://klren0312.github.io/vue3-webpack/
App.vue
https://github.com/vuejs/vue-next
https://webpack.js.org/concepts/
工具/原料NodeJsWindows系统方法/步骤要使用Grunt，第一件事是安装Node.js。（即使你没用过Node.js也不用担心——你只需安装它让Grunt能运行。）安装了Node.js之后，用命令行工具执行以下命令：$npminstall-ggrunt-cli要确认Grunt是否正确安装，可以使用以下命令：$grunt--version下一步是在你的项目的根目录下创建package.json和gruntfile.js两个文件。创建package.json文件这个JSON文件让我们指定我们的开发环境所依赖的必须模块。有了它，项目的所有开发者都能保证安装上一致的必须模块，从而保证所有人拥有一样的开发环境。在项目根目录下的pacakge.json文件中写上：{"name":"SampleGrunt","version":"0.1.0","author":"BrandonRandom","private":true,"devDependencies":{"grunt":"~0.4.0"}}然后在命令行工具运行：$npminstall该命令告诉npm需要安装的必须模块，npm会安装它们，自动保存在项目根目录下一个叫做node_modules的文件夹里。创建gruntfile.js文件gruntfile.js文件本质上就是一个wrapper函数，接受grunt作为参数：module.exports=function(grunt){grunt.initConfig({pkg:grunt.file.readJSON('package.json')})grunt.registerTask('default',[])}现在你已经可以在项目根目录下运行grunt命令行工具了。$grunt>Task"default"notfound.Use--forcetocontinue.这里我们只指定了Grunt作为必须模块，还没定义任何任务。接下来我们就要指定任务和必须模块。首先来看如何拓展package.json文件。拓展package.json文件使用Node.js最好的一点，就是它可以根据package.json文件的内容，一次性查找和安装多个package。要安装我们项目的所有必须任务，只须在package.json文件中加上以下内容：{"name":"SampleGrunt","version":"0.1.0","author":"MikeCunsolo","private":true,"devDependencies":{"grunt":"~0.4.0","grunt-contrib-cssmin":"*","grunt-contrib-sass":"*","grunt-contrib-uglify":"*","grunt-contrib-watch":"*","grunt-cssc":"*","grunt-htmlhint":"*","matchdep":"*"}}那么如何实现安装？你肯定已经猜到了：$npminstall使用Grunt载入任务package安装好后，还必须被Grunt载入才能为我们所用。使用matchdep，我们用一行代码就可以自动载入所有任务。这是开发流程的一大优化，因为现在我们只须把必须任务列表写在package.json一个文件里，便于管理。在gruntfile.js里，grunt.initConfig之上，写上以下代码：require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks)要是没有matchdep，我们就必须为每一个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”)，随着我们使用的任务的增加，这些载入任务的代码很快就会变得相当繁冗。在Grunt载入这些任务前，我们还可以指定设置选项。现在我们需要创建我们的HTML文件（index.html）：EnteryourfirstnameEnteryourfirstname用HTMLHint验证HTML在grunt.initConfig里加入下列设置代码：htmlhint:{build:{options:{'tag-pair':true,'tagname-lowercase':true,'attr-lowercase':true,'attr-value-double-quotes':true,'doctype-first':true,'spec-char-escape':true,'id-unique':true,'head-script-disabled':true,'style-disabled':true},src:['index.html']}}一般来说，一个plugin的设置方法如下：plugin的名称（去掉grunt-contrib-或grunt-前缀），选择使用此plugin的一个或多个对象（在这里可以给不同文件设置此plugin的不同选项），一个选项object，以及plugin要作用的对象。现在，如果我们用命令行工具运行grunthtmlhint，该plugin就会检查我们在src里指定的HTML文件，验证其中有没有错误！但是每个小时都要手动运行几次这个任务，很快就让人觉得很繁琐了。自动化任务运行watch是一个特殊的任务，它可以在目标文件保存时自动触发一系列任务的运行。在grunt.initConfig里加入以下设置：watch:{html:{files:['index.html'],tasks:['htmlhint']}}然后，在命令行工具中运行gruntwatch命令。现在，你可以试试在index.html里加一行注释，保存文件。你会注意到，保存文件时会自动触发HTML的验证！这是对开发流程的一大优化：在你写代码时，watch任务就会默默同时为你验证代码，如果验证失败任务就会报告失败（它还会告诉你问题在哪）。注意gruntwatch任务会一直运行，直到命令行工具关闭，或手动停止（control+c在Mac中)。保持JavaScript极简让我们来写一个验证用户输入的名字的JavaScript文件。简便起见，我们这里只检查其中是否含有非字母的字符。我们的JavaScript会使用strict模式，这可以防止我们写可用但低质量的JavaScript。创建assets/js/base.js文件并在其中写上：functionValidator(){"usestrict"}Validator.prototype.checkName=function(name){"usestrict"return(/[^a-z]/i.test(name)===false)}window.addEventListener('load',function(){"usestrict"document.getElementById('firstname').addEventListener('blur',function(){var_this=thisvarvalidator=newValidator()varvalidation=document.getElementById('namevalidation')if(validator.checkName(_this.value)===true){validation.innerHTML='Looksgood!:)'validation.className="validationyep"_this.className="yep"}else{validation.innerHTML='Looksbad!:('validation.className="validationnope"_this.className="nope"}})})让我们用UglifyJS来极简化这个源代码，在grunt.initConfig中加上以下设置：uglify:{build:{files:{'build/js/base.min.js':['assets/js/base.js']}}}UglifyJS会替换所有的变量和函数名，剔除所有空白和注释，从而生成占据最小空间的JavaScript文件，对发布非常有用。同样地，我们需要设置一个watch任务来使用它，在watch的设置里加入以下代码：watch:{js:{files:['assets/js/base.js'],tasks:['uglify']}}9现在我们有了一个静态HTML页面，一个存放Sass和JavaScript源文件的assets文件夹，一个存放优化后的CSS和JavaScript的build文件夹，以及package.json文件和gruntfile.js文件。至此你已经有了一个不错的基础来进一步探索Grunt。像之前提到的，一个非常活跃的开发者社区在为Grunt开发前端plugin。我建议你现在就到pluginlibrary去看看那300个以上的plugin。
