Vuejs学习笔记(三)-7.webpack配置plugin

webpack的插件使用。

一、配置版权

1.webpack.config.js中引用webpack,

const webpack = require('webpack')

2.plugins中配置版权

new webpack.BannerPlugin('最终版权归invoker所有')

 

3.代码如下：

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        loader: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              //加载图片小于limit时，会将图片编辑成base64字符串形式
              // 加载图片大于limit时，需要使用file-loader模块进行加载
              limit: 81920,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/i,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/i,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    },
    extensions:['.js','.css','.less','.vue']
  },
  plugins:[
      new webpack.BannerPlugin('最终版权归invoker所有')
  ]

}

4.检查打包文件中会有版权信息。

 

二、HtmlWebpackPlugin插件

HtmlWebpackPlugin插件
原因：真实项目发布只有dist文件夹，因此得想办法将index.html打包到dist中
作用：1.生成一个index.html文件（可以指定魔板) 2.将打包的js文件，自动通过script标签插入到Body中 
13.1 npm install html-webpack-plugin@3.2.0 --save-dev
13.2 修改webpack.config.js中plugins部分
代码如下：

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',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        loader: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              //加载图片小于limit时，会将图片编辑成base64字符串形式
              // 加载图片大于limit时，需要使用file-loader模块进行加载
              limit: 81920,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/i,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/i,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    },
    extensions:['.js','.css','.less','.vue']
  },
  plugins:[
      new webpack.BannerPlugin('最终版权归invoker所有'),
      new HtmlWebpackPlugin({
            template:'index.html'
          }
      ),
  ],

}

 

13.3 npm run build,则在dist下生成index.html文件,内有script，但是没有div模板
13.4 注释掉webpack.config.js中的output publicPath

 

 

13.5 指定模板index.html

 

 

13.6 注释掉模板中的script

 

三、js代码丑化插件

3.1 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

3.2 在webpack.config.js的plugins中添加这个插件的实例

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        loader: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              //加载图片小于limit时，会将图片编辑成base64字符串形式
              // 加载图片大于limit时，需要使用file-loader模块进行加载
              limit: 81920,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/i,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/i,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    },
    extensions:['.js','.css','.less','.vue']
  },
  plugins:[
      new webpack.BannerPlugin('最终版权归invoker所有'),
      new HtmlWebpackPlugin({
            template:'index.html'
          }
      ),
      new uglifyJsPlugin()
  ],
}

四、搭建本地服务器

背景：之前的代码每次修改完后，都需要重新编译，很麻烦，可以通过搭建本地服务器的方式避免每次都要重新编译。

原理：搭建一个基于Node.js的服务器，使用的是express框架。可以服务于指定文件夹，比如：dist文件夹，监听src中的代码有没有改变，如果有改变，则重新编译src代码，但是不会在dist下重新生成新的文件，而是把编译的内容放置在内存中，只有执行了npm run build才会把内存中的内容写入磁盘文件，在dist下生成新的打包文件。

 

步骤：

1. npm install --save-dev webpack-dev-server@2.9.3

2.在webpack.config.js中配置

 

 

3.配置package.json文件

webpack-dev-server  --open 

已默认浏览器打开

 

 

 4.npm run dev 开启服务器，此时修改代码都会写到内存中

5.npm run build，将内存中的内容写到磁盘

6.开发阶段不要使用uglifyjs，因为dev阶段需要调试在控制台调试script