Vue-CLI搭建

• 初始化项目 yarn init 

• ​安装webpack依赖  yarn add webpack

• 创建build文件夹

  • webpack基本配置文件     webpack.base.conf.js

    • ​入口  entry

    • ​出口  output

      • ​filename

      • ​path

      • ​publicPath

    • 解析 resolve

      • ​扩展名extensions

        • ​js

        • ​vue

        • ​json

    • ​公共模块 module

      • ​vue

        • ​vue-loader

      • ​js

        • ​babel-loader

      • ​图片

        • ​url-loader

      • ​svg

        • ​svg-sprite-loader

      • ​媒体

        • ​url-loader

      • ​iconfont

        • ​url-loader

    • ​公共插件 plugins

  • ​webpack开发配置文件    webpack.dev.conf.js

    • 类型 mode   development

    • ​加载css模块

    • ​devtool 开启source-map

    • ​devServer 

      • 热更新hot

      • ​地址host

      • ​端口号port

      • ​打开浏览器open

      • ​浏览器中报错overlay

      • ​静态资源地址publicPath

      • ​代理proxy

      • ​历史API回调historyApiFallback

      • ​压缩compress

    • ​插件  plugins

      • ​webpack.DefinePlugin 设置全局变量

      • ​webpack.HotModuleReplacementPlugin  热更新

      • ​HtmlWebpackPlugin  打包HTML

  • ​webpack生产配置文件    webpack.prod.conf.js

    • ​mode  类型  production

    • ​module 模块

      • ​加载css-loader并分离

    • ​devtool  是否启用source-map

    • ​plugins 插件

      • ​webpack.DefinePlugin 设置全局变量

      • ​MiniCssExtractPlugin分离css

      • ​ HtmlWebpackPlugin分离html

      • w​ebpack.HashedModuleIdsPlugin模块设置hashId,缓存优化

      • ​CopyWebpackPlugin //负责静态资源

    • ​optimization

      • ​splitChunks 打包公共js文件

      • ​minimizer 

        • ​UglifyJsPlugin压缩js

        • ​OptimizeCSSAssetsPlugin提取css并压缩

  • ​公共配置文件  utils.js

    • ​css类模块的封装

    • ​style-loader模块的封装

  • ​打包配置文件  build.js

    • ​ora

    • ​rimraf

    • ​chalk

    • ​connect

    • ​serve-static

• ​配置babel

  • ​插件

    • ​babel-core 

    • ​babel-preset-env

    • ​babel-loader

  • 配置文件

    • ​​.babelrc

• ​配置postcss

  • ​插件

    • ​postcss-loader

    • ​autoprefixer自动加前缀

  • ​配置文件

    • ​.postcssrc.js

• ​配置eslint

  • ​插件

    • ​eslint-loader

    • ​babel-eslint

  • ​配置文件

    • ​.eslintrc.js

    • ​.eslintignore