plugin 相关插件以及配置本地服务器和配置文件分离

添加版权信息plugin

在webpack.config.js中配置

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: /\.vue$/,
        use: ['vue-loader']
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归zzzy所有')
  ]
}

显示在bundle.js中

打包html的插件 html-webpack-plugin

npm install html-webpack-plugin --save-dev
在webpack.config.js中配置

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$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归zzzy所有'),
    new htmlwebpackPlugin()
  ]
}

自定义HTML模板

在原本的index.html中只保留 <div id="app"></div>

在webpack.config.js中配置

最终打包的html为

对js进行压缩的插件

项目上线时使用
npm install uglifyjs-webpack-plugin --save-dev
在webpack.config.js中配置

const uglifyjsWebpackPlugin = 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$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归zzzy所有'),
    new htmlwebpackPlugin({
      template: 'index.html'
    }),
    new uglifyjsWebpackPlugin()
  ]
}

打包之后bundle.js显示为空格以及注释都被删除

配置本地服务器 开发时使用

npm run webpack-dev-server --save-dev 版本需和vue版本一致
需要再webpack.config.js中配置

运行命令 npm run dev 需要在package.json中配置
打开–open表示为运行之后直接在浏览器中打开

配置文件分离

将开发环境与生产环境分离
npm run webpack-merge --save-dev

在build文件夹下分别建立文件,区分环境

• base.config.js 为基础配置文件
• dev.config.js 为开发时依赖
• prod.config.js 为生产时依赖

• base.config.js
  其中需要为打包文件指定位置 path: path.resolve(__dirname, '../dist'),
  

• prod.config.js
  

• dev.config.js
  
  在package.json中配置

• "build": "webpack --config ./build/prod.config.js" 后面为指定的文件

• "dev": "webpack-dev-server --open --config ./build/dev.config.js" 后面为指定的文件