了解webpack

打包工具还有：webpack，grunt，gulp
webpack功能和扩展性好

webpack 概念

webpack将项目看做一个整体，通过一个给定的主文件，webpack将这个文件开始找到你的项目的所有依赖的文件，使用loader处理他们，最后打包成一个或多个浏览器可以识别的js文件。

webpack是模块打包机
webpack-dev-server 用来创建本地服务器，监听代码修改，并自动刷新修改

devServer:{
  contentBase:'./Src',  //本地服务所加载的页面所在的目录
  historyApiFallback:true,
  inline:true //实时刷新
}

loader

loader的作用
1.实现对不同格式的文件的处理，比如将scss转换成css，或者typescript转化为js
loader是webpack最重要的部分之一，通过使用不同的loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理，loader需要在webpack.config.js里面单独用module进行配置

var baseConfig={
  module:{
    rules:[
        {
          test:/\.scss$/,
          use:[
            loader:scss-loader,
            query:'其他配置'
          ],
          exclude:/node_modules/
        }
    ]
}
}

plugins

loader负责的是处理源文件css,jsx，一次性处理一个文件，而plugins并不是直接操作单个文件，他是对整个构建过程中作用

ExtractTextWebpackPlugin：他会将入口中引用css文件，都打包成独立的css文件，而不是嵌在js打包文件中，他的应用如下

var ExtractTextPlugin=require('extract-text-webpack-plugin')
var lessRules={
    use:[
      {loader:'css-loader'},
      {loader:'less-loader'}
    ]
}
var baseConfig={
      module:{
        rules:[
          {test:/\.less$/,use:ExtractTextPlugin.extract(lessRules)}
        ]
      },
    pugins:[
        new ExtractTextPlugin('main.css')
      ]
  }

配置npm run build 打包文件到指定文件夹下

vue2配置

    index: path.resolve(__dirname, '../../../cbs-mobile-sales-restful/src/main/webapp/aaa/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../../cbs-mobile-sales-restful/src/main/webapp/aaa'),
    assetsSubDirectory: 'static',
assetsRoot:构建输出目录 也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录 除了index.html，其余的js img css都分在这里
assetsPublicPath:项目目录 一个杠杠 啥意思呢，是根目录的意思

vue3配置

 outputDir: '../../cbs-mobile-sales-restful/src/main/webapp/actuals',

moudule.exports和export 之间有什么区别

前者公开了他只想的对象，后者公开了他指向对象的属性

const car = {
  brand: 'Ford',
  model: 'Fiesta'
}

module.exports = car

//在另一个文件中

const car = require('./car')




另一种方式
const car = {
  brand: 'Ford',
  model: 'Fiesta'
}

exports.car = car
或者
exports.car = {
  brand: 'Ford',
  model: 'Fiesta'
}

另一个文件夹引入
const items = require('./items')
items.car
或者
const car = require('./items').car