Vue.js学习第九天——webpack插件相关、配置分离及CLI的安装

Vue.js学习第九天——webpack插件相关、配置分离及CLI的安装

继昨天学习的BannerPlugin继续今天有关插件的学习吧！

1.webpack插件相关

• HtmlWebpackPlugin

  作用：自动生成一个index.html文件(可以指定模板来生成)

  安装：npm install html-webpack-plugin --save-dev

  配置：下载完成之后，同样需要在webpack.config.js文件中进行引入，并且在plugins中进行相应的配置，const HtmlWebpackPlugin = require('html-webpack-plugin');

  new HtmlWebpackPlugin({
      template:'index.html'
  })
  

  template的作用是指明它的模板，模板中的script标签可以省略，因为此插件会自动将用到的script进行引入，之后我们重新打包文件后就会自动在dist目录中生成一个新的index文件。注：这里要把之前的publicPath注释掉，因为bundle.js文件已经和index文件在同一级目录下了

• UglifyjsWebpackPlugin

  作用：对打包的js文件进行压缩

  安装：npm install [email protected] --save-dev

  配置：下载完成后，需要在webpack.config.js文件中进行引入，并且在plugins中进行相应的配置，**const** UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

  plugins:[
      new UglifyjsWebpackPlugin()
  ],
  

  配置后，重新打包文件我们就会发现js文件已经删去空格以及我们之前用BannerPlugin生成的版权说明，所以此插件最好不要和BannerPlugin一起使用

• WebpackDevServer

  作用：搭建本地服务器，能够自动监听代码是否有改变，并实时地在界面上进行渲染，就不用我们每一次都对文件进行打包了

  原理：它是基于node.js的，内部使用的是node中的express框架，当它监听到有改变的时候，就会重新进行编译，将编译后的代码放在内存中让我们进行测试，最终只需要执行一次对文件的打包即可

  安装：npm install --save-dev [email protected]

  配置：下载完成后，需要在webpack.config.js文件中进行相应的配置

  devServer:{
      contentBase:'./dist',	//指明服务于哪一个文件夹
      inline:true			   //是否需要实时刷新
  }
  

  此外还有两个可选参数

  1. port：指明它的端口号，默认是8080
  2. historyApiFallback：在SPA(单页面复应用)页面中，依赖HTML5的history模式

  配置完成后，有两种方式对我们的文件进行实时的刷新

  1. 采用命令./node_modules/.bin/webpack-dev-server
  2. 在package.json文件的script中，添加"dev": "webpack-dev-server --open"–open是用来当输完命令后它会自动打开浏览器，若没有写，则需要我们点击链接进入

  注意：不能在终端中直接输入命令webpack-dev-server因为之前我们说过，在任何的终端中输入的命令都会去全局下找对应的文件，但是我们之前并没有全局安装。

  ---

2.webpack配置文件的分离

​ 背景：在我们完成上述操作后，我们会发现，在我们的开发模式中，对于uglifyjs-webpack-plugin插件的使用其实是用不到的，因为实际开发中，要反复调试我们的js代码，故应该省去此插件的使用；同理在我们的运行环境下本地服务器插件也是用不到的，所以将webpack配置文件的分离是非常必要的。

​ 思路：我们将开发时用到的一些模块放到dev-config.js文件中，将运行时用到的文件放到prod.config.js文件中，将一些基本的代码放到base.config.js文件中，这样一来一旦我们是在开发环境中，执行开发环境的命令时，就将dev-config.js和base.config.js文件合并在一起，在运行环境中也是同理，那么什么插件可以将我们的两个文件进行合并呢，那就是webpack-merge

​ 安装：npm install webpack-merge --save-dev

​ 配置：新建build文件夹，文件夹中存放以上说的三个文件，代码下边我会贴出来，在dev-config.js文件和prod.config.js文件中需要引入我们安装的webpack-merge，还是贴代码吧

base.js文件

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'../dist'),
        filename: 'bundle.js',
        // 涉及到路径 他都会在前面加一个dist 最后就不需要了
        // 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|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 当加载的图片大小小于limit时，他会将图片编译成base64字符串形式 不需要单独的文件来存储
                            // 当加载的图片大小大于limit时，使用file-loader模块进行加载 会单独打包成另一个文件
                            // 这个值默认是8k
                            limit: 8192,
                            name: 'img/[name][hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    resolve:{
        // 导入的时候省略后缀
        extensions:['.js','.css','.vue'],
        // 别名
        alias:{
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins:[
        new webpack.BannerPlugin('最终版权归beanBag所有'),
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ]
}

dev.cofig.js文件

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

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

prod.config.js文件

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

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

这时候当我们重新打包后，终端也会报错，终端说找不到我们的webpack.config.js文件，所以我们要到package.json文件的scripts中做进一步的配置，代码如下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
}

这时候我们重新打包就不会报错了，但是会出现另外一个问题，就是打包生成的文件跑到了build文件夹下，因为base文件中指定目录是当前所在的目录，所以我们还需要修改base文件里的目录拼接部分path: path.resolve(__dirname,'../dist'),这时候再打包就可以了。现在我们就实现了一个简单的配置分离的工作

---

3.vuecli脚手架相关

背景：从以上webpack的配置来看，是不是感到非常的繁琐，事实上，当我们配置大型项目的时候，配置往往更加复杂，所以出现了我们的cli，也就是现在俗称的脚手架，当然并不是它的全称，而是它能够一次性地搭建出完整的骨架，所以形象地把它称为脚手架

安装：npm install -g @vue/[email protected]我们之所以安装3.2.1版本而不是最新的版本是为了和老师地保持同步，免得又出岔子，由于后面老师会先讲vue2的搭建，所以这里还需要拉取cli2.x的模板，命令为npm install @vue/cli-init -g

介绍：CLI:Command-Line Interface 叫做命令行界面，VueCLI是官方发布的vue.js项目脚手架，使用脚手架可以快速搭建vue开发环境以及对应的webpack配置，当我们在编写大型项目中，往往需要考虑代码的目录结构、项目结构和部署、热加载以及代码的单元测试，脚手架帮我们考虑到了以上的问题，是一个非常好的工具

使用：接下来我们就创建一个脚手架2的项目，脚手架2和脚手架3在创建项目的时候，命令有点差别
脚手架2：vue init webpack my-project
脚手架3：vue create my_project
安装过程中需要我们回答一些问题，稍微有一个看不懂的是Use ESLint to lint your code?这个指的是代码的规范，我们一般喜欢随心所欲所以回答No即可，还有一个单元测试，我们也选择No吧，完成后会生成以下图片的一个项目结构