Vue学习笔记-Day9 webpack配置文件分离、与grunt和gulp的区别

webpack配置文件分离

前面所有webpack的配置我们都写在了webpack.config.js中，但是这样会存在一个问题，比如有些配置我们需要在开发的时候使用，有些我们只想在打包时使用。

举个例子： uglifyjs.webpack.plugin 对 js 代码进行压缩，压缩后的代码难以阅读，如果在开发阶段就进行压缩，代码结构遭到破坏，会导致开发不便，所以最好是在打包的时候进行压缩，这个时候就需要对webpack配置文件进行分离。

实现步骤：

1 新建三个js文件：命名可以自取，但是最好还是按照规范吧：

为了方便归类，就全部放在了一个build的文件夹下面

2 将配置内容分类

将常用的以及基本的配置内容放在 base.config.js中

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
 entry: './src/main.js',
 output:{
   path: path.resolve(__dirname,'dist'),
   filename: 'bundle.js',
   publicPath: 'dist/'
 },
 module: {
  rules: [
    {
      test:/\.css$/,
      use:['style-loader','css-loader']
    },
    {
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader', // creates style nodes from JS strings
        },
        {
          loader: 'css-loader', // translates CSS into CommonJS
        },
        {
          loader: 'less-loader', // compiles Less to CSS
        },
      ],
    },
    {
      test: /\.(png|jpe?g|gif)$/i,
      loader: 'file-loader',
      options: {
        name: 'img/[name].[ext]',
      },
    },
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-object-rest-spread']
        }
      }
    },
    {
      test: /\.vue$/,
      use: ['vue-loader']
    }
  ]
 },
 plugins:[
    new VueLoaderPlugin(),
    new webpack.BannerPlugin("my project"),//配置版权
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
 ],
 resolve: {
   extensions:['.js','.css','.vue'],
   alias: {
     'vue$': 'vue/dist/vue.esm.js'
   }
 }
}

将开发阶段需要的配置放入dev.config.js中

const webpack = require('webpack')

module.exports = {
 devServer:{
    contentBase:'./dist',
    inline:true
 }
}

将打包阶段需要的配置放在 prod.config.js中

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 plugins:[
    new UglifyjsWebpackPlugin(),
 ],
}

**3 **合并JS文件

将配置文件进行组合，实现对应的功能。在这里我们通过webpack-merge来连接两个配置文件：
安装插件 ： webpack-merge

npm install webpack-merge --save-dev

进行合并：

合并base.config.js和prop.config.js。在dev.config.js中引入merge，并进行合并

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const baseConfig = require('./base.config')
const WebpackMerge = require('webpack-merge')

module.exports = WebpackMerge(baseConfig,{
  plugins:[
    new UglifyjsWebpackPlugin(),
 ],
})

合并base.config.js和dev.config.js。在dev.config.js中引入merge，并进行合并

const webpack = require('webpack')
const baseConfig = require('./base.config')
const WebpackMerge = require('webpack-merge')

module.exports = WebpackMerge(baseConfig,{
 devServer:{
    contentBase:'./dist',
    inline:true
 }
})

**4 **使用

在package.json文件的script标签中，为dev和bulid配置需要执行的配置文件

5 运行

npm run build 打包

npm run dev 编译

运行打包可能会出现一个小问题，原来预计打包放在dist下面的文件，自动生成在了build/dist下面

所以，将path改成 path: path.resolve(__dirname,‘…/dist’)，重新运行打包就发现数据在我们自己建的dist文件夹下了。

配置可能相对较麻烦，但是在配置文件比较多的时候，将生产环境和打包环境分开就会很方便，并且理解这个原理，对于后期的脚手架的理解会比较容易。

webpack插件

vue插件的使用步骤： 导入、然后在 plugins中配置

部分插件介绍：

webpack.bannerPlugin：版权声明插件

Html-webpack-plugin：在dist文件夹中主动生成html，这个在打包的时候必须配置

uglifyjs-webpack-plugin：对代码进行压缩，和版权的插件冲突，在开发阶段不建议使用，因为代码的压缩会印象文件的结构，所以最好在打包到服务器的时候。

拓展：

JS代码压缩工具： uglify、google closure compiler、YUI Compressor

google closure complier压缩三部曲：whitespace、simple、advanced（改变原有结构：分析、重写、破坏）

webpack和grunt还有gulp的区别

grunt是最早出现的前端构建工具，在grunt出现之前，我们都是通过自己调用uglify或者google closure compile来进行代码的压缩。

grunt通过定义task任务来对每一个文件进行打包，每一个任务执行后都输出一个文件。因此这样存在一个问题，如果某个文件需要中间转化很多次，每转化一次生成一个文件，这样时间消耗过长。举个例子 ： less文件加载时，先把less解析成一个css文件，然后再将css文件进行压缩，按照 grunt的思维就会生成两个文件，其中一个是我们不需要的中间文件。

Gulp是基于Stream的，对Grunt进行了改良，不需要生成中间文件，无论中间经过多少次操作，都只生成最终的文件。

但是无论是Grunt还是Gulp都是将混乱的构建过程进行了统一化，使用起来变得方便了，实质上没变。我们依然需要在引入css、js、图片的时候各自打包，并没有解决模块化的问题

webpack解决了模块化的问题，它的所有文件最终都是JS，任何资源都可以作为一个模块在JS中声明依赖，并且处理模块间的依赖。所以我们在写结构并不复杂的项目时，可以采用grunt或者gulp，但是结构复杂或者需要模块化的时候，就采用webpack。

词汇全写

API ：Application programming interface 应用程序接口

CLI ：common line interface命令行接口

npm: node package manage