vue-cli and webpack配置(理解)

一 webpack配置(理解)

1. 未配置的webpack打包

webcpack ./src/main.js ./dist/bundle.js

2. webpack配置-JS

  1. 创建webpack.config.js文件
  2. 配置(配置完命令行输入webpack即可完成打包)
const path = require('path')

module.exports = {
	entry: './src/main.js',
	//main.js一般是入口文件
	output: {
	//获得绝对路径
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
}		
  1. node项目package.json中scripts作用:指令映射
  2. 在package.json中scripts加入"build": "webpack"
  3. 命令行中运行npm run build即可解析(优点:优先使用本地版本的webpack,而不是全局)

3. webpack配置-CSS

  1. 安装 css-loader 和 style-loader
npm install css-loader style-loader --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js'
  },
  //加入的CSS相关配置
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}		
  1. 在入口函数main.js中加入依赖
//CommonJS导入模块
const {add,nu} = require('./js/mathUtils.js')
//ES6导入模块
import {name,age} from './js/info'
//加入内容
require('./css/style.css')
  1. 命令行中运行npm run build解析

4. webpack配置-Less

  1. 安装 less 和 less-loader
npm install less-loader less --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js'
  },
  //加入的CSS相关配置
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
    ]
  }
}		
  1. 在入口函数main.js中加入依赖
//CommonJS导入模块
const {add,nu} = require('./js/mathUtils.js')
//ES6导入模块
import {name,age} from './js/info'
require('./css/style.css')
//加入内容
require('./css/infront.less')

5. webpack配置-图片

  1. 安装 url-loader 和 file-loader
npm install url-loader file-loader --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片应该用打包路径
    publicPath: "/dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000,
              //防止命名重复
              name:'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

6. webpack配置-ES6转ES5

  1. 安装包
npm install babel-[email protected]7 babel-core babel-preset-es2015 --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    publicPath: "/dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      //ES6转ES5
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }
}

7. webpack配置-Vue

  1. 安装包
npm install vue
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    publicPath: "/dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

8. webpack配置-Vue封装配置

  1. 安装
npm install vue-loader vue-template-compiler --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    publicPath: "/dist",
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

9. webpack配置-条幅插件

  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    publicPath: "/dist",
  },
  plugins: [
    //vue-loader需要的插件
    new VueLoaderPlugin(),
    //条幅插件
    new webpack.BannerPlugin('最终版权归作者所有'),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

10. webpack配置-html-webpack-plugin插件

  1. 安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');


module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
      //vue-loader需要的插件
      new VueLoaderPlugin(),
      //条幅插件
      new webpack.BannerPlugin('最终版权归作者所有'),
      //html-webpack-plugin 将入口html文件加入到dist中
      new html({
        template: 'index.html',//依照这个模板编译新的html文件
      }),

  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

11. webpack配置-uglifyjs-webpack-plugin插件(压缩)

  1. 安装html-webpack-plugin(指定1.0.1版本)
npm install uglifyjs-webpack-[email protected]1.0.0 --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');


module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
      //vue-loader需要的插件
      new VueLoaderPlugin(),
      //条幅插件
      new webpack.BannerPlugin('最终版权归作者所有'),
      //html-webpack-plugin 将入口html文件加入到dist中
      new html({
        template: 'index.html',//依照这个模板编译新的html文件
      }),

  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

12. webpack配置-webpack-dev-server(搭建服务器)

  1. 安装webpack-dev-server(2.9.1版本)
npm install webpack-dev-[email protected]2.9.1 -g
  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');
const uglifyJS = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
      //vue-loader需要的插件
      new VueLoaderPlugin(),
      //条幅插件
      new webpack.BannerPlugin('最终版权归作者所有'),
      //html-webpack-plugin 将入口html文件加入到dist中
      new html({
        template: 'index.html',//依照这个模板编译新的html文件
      }),
      //压缩代码
      new uglifyJS(),

  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    contentBase: './dist',
    port: '3001',
    inline:true,//实时监听
  }
}
  1. 执行 webpack-dev-server

13. webpack配置 生产/开发环境分离

  1. 安装 webpack-merge
npm install webpack-merge --save-dev
  1. 创建 base.config.js 存放共有环境
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
    //vue-loader需要的插件
    new VueLoaderPlugin(),
    //条幅插件
    new webpack.BannerPlugin('最终版权归作者所有'),
    //html-webpack-plugin 将入口html文件加入到dist中
    new html({
      template: 'index.html',//依照这个模板编译新的html文件
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
}
  1. 创建 dev.config.js 存放开发环境
const merge = require('webpack-merge');
const baseConfig =require('./base.config');

module.exports = (baseConfig,{
  devServer: {
     contentBase: './dist',
     port: '3001',
     inline:true,//实时监听
  }
})
  1. 创建 prod.config.js 存放开发环境
const uglifyJS = require('uglifyjs-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig =require('./base.config')

module.exports = merge(baseConfig,{
  plugins: [
    //压缩代码
    new uglifyJS(),
  ]
})
  1. 在package中添加映射
  "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"
  },
  1. npm run build编译
  2. npm run dev服务器启动

二 Vue组件分离配置总结

1. index.html 文件(存放DOM基本结构)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

</style>
<body>
//为模板提供替换点 
<div id="app"></div>
//导入编译后的js文件
<script src="./dist/bundle.js"></script>
</body>
</html>

2. main.js 文件(导入组件,用组件替换对应DOM)

import Vue from 'vue'
import App from './vue/App'

new Vue({
  el: "#app",
  template: '<App/>',
  components: {
    App
  }
})

3. App.vue(定义模板与样式)

<template>
  <div>
    <h2>组件测试{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "App",
    data(){
      return{
        name: "第一"
      }
    }
  }
</script>

<style scoped>
h2{
  color:green;
}
</style>

4. package.json(依赖包)

{
  "name": "pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "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"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11",
    "webpack-dev-server": "^2.9.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "style-loader": "^1.1.3",
    "uglifyjs-webpack-plugin": "^1.0.0",
    "url-loader": "^3.0.0",
    "vue-loader": "^15.9.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-merge": "^4.2.2"
  }
}

5. 创建 base.config.js 存放共有环境

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

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    //加入公共路径,编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
    //vue-loader需要的插件
    new VueLoaderPlugin(),
    //条幅插件
    new webpack.BannerPlugin('最终版权归作者所有'),
    //html-webpack-plugin 将入口html文件加入到dist中
    new html({
      template: 'index.html',//依照这个模板编译新的html文件
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载,所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时,将图片编译成base64字符串形式
              //当加载的图片大于limit时,需要用file-loader,但不想需要配置,安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本,可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
}

6. 创建 dev.config.js 存放开发环境

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

module.exports = (baseConfig,{
  devServer: {
     contentBase: './dist',
     port: '3001',
     inline:true,//实时监听
  }
})

7. 创建 prod.config.js 存放开发环境

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

module.exports = merge(baseConfig,{
  plugins: [
    //压缩代码
    new uglifyJS(),
  ]
})

三 Vue CLI 脚手架(能快速搭建Vue开发环境以及对webpack进行配置)

1. 什么是Vue CLI

Vue CLI(Command-Line Interface)俗称 脚手架 是Vue官方发布的一个框架,用来快速构建项目结构

2. 安装vue-cli

npm install @vue/cli -g

拉取vue-cli 2.X版本

npm install @vue/cli-init -g
发布了34 篇原创文章 · 获赞 6 · 访问量 4450

猜你喜欢

转载自blog.csdn.net/ChristWTF/article/details/104287320