WebPack总结分享

Webpack:

• 模块化，js、css.资源的模块化
• 组件化，复用现有的结构样式行为
• 规范化，目录结构划分，编码规范化，文档规范化、git分支管理
• 自动化，自动化构建、部署、测试

Vue.config.js配置

vue.config.js 是一个vue-cli3之后作为可选的配置文件，项目更根目录中存在，它会被 @vue/cli-service 自动加载

// const path = require('path')
// const CompressionPlugin = require('compression-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
// const webpack = require('webpack')
// const cesiumSource = 'node_modules/cesium/Source'
// const cesiumWorkers = '../Build/Cesium/Workers'

// function resolve(dir) {
//   return path.join(__dirname, dir)
// }

// vue.config.js
module.exports = {
 // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
 //true代表会对js生成以下map后缀的文件，好处是可以在控制台当中清晰看到打印或者报错信息的位置，缺点   是增大打包的体积，打包速度变慢
    productionSourceMap: false,

    //打包app时放开该配置  vue cli3.3之前baseUrl
    // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
    publicPath: process.env.VUE_APP_ROOT_URL,
    // publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',  //部署应用包时的基本 URL
    // 如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：
    // publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/',
    //打包时输出目录
    outputDir: 'caix',
    // 静态资源的目录
    assetsDir: 'static',
    //html输出路径
    indexPath: 'index.html',
    //是否在保存的时候使用`eslint-loader`进行语法检测
    lintOnSave: true,
    // lintOnSave: undefined
    filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
    pages: {
        index: {
            // page 的入口
            entry: 'src/index/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js'
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    },
    //设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
    // 需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
    crossOrigin:undefined,
    //css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        extract: true,
        //是否开启css source map
        sourceMap: 'false',
        //为预处理前loader传递自定义选项
        loaderOptions: {
            css: {
                //传递给css-loader
            },
            postcss: {
                //传递给postcss-loader
            },
            less: { //传递给less-loader
                modifyVars: {
                    /* less 变量覆盖，用于自定义 ant design 主题 */
                    'primary-color': '#1890FF',
                    'link-color': '#1890FF',
                    'border-radius-base': '4px'
                },
                javascriptEnabled: true
            }
        },
        //为所有css及预处理前开启 css Module,不会影响`*.vue`文件
        modules: false
    },
    //配置webpac-dev-server 行为
    devServer: {
        hot: true, //热加载
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
            '/api': {
                target: '\'http://baidu.com\'', // 请求本地 需要jeecg-boot后台项目
                // 如果要代理 websockets
                ws: false,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    // 是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
    pluginOptions: { // 第三方插件配置
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项
    }
}

ESLint ——js、jsx的检查工具

可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段来配置。

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

官方网站：https://eslint.bootcss.com/

Babel

babel可以通过 babel.config.js 进行配置。

提示: Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。我们推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

所有的 Vue CLI 应用都使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX 支持以及为最小化包体积优化过的配置。通过它的文档可以查阅到更多细节和 preset 选项。

TypeScript

可以通过 tsconfig.json 来配置。