webpack配置自定义作用：设置别名是为了让后续引用的地方减少路径的复杂度。 webpack中活用cdn可以大幅度减少

PX自动转化为rem

安装 postcss-pxtorem

npm install postcss-pxtorem -D

修改根目录 .postcssrc.js 文件,找到 plugins 属性新增pxtorem的设置

"postcss-pxtorem": {
  "rootValue": 32,
  "propList": ["*"]
}

alias

作用：设置别名是为了让后续引用的地方减少路径的复杂度。

在webpack.config.js中配置

const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: resolve('dist')
    },
    resolve: {
        // 设置别名
        alias: {
            '@': resolve('src')// 这样配置后 @ 可以指向 src 目录
        }
    }
};

使用

import utils math from "@/utils/utils";

配置proxy跨域

CDN的配置

webpack中活用cdn可以大幅度减少打包文件的体积。利用浏览器多线程的优势，同时下载若干个静态文件。

首先在入口html文件（index.html）里引入相应cdn链接。

// index.html
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>

然后配置webpack,则import 引用的资源将不被打包，而是在运行时从外部获取。

module.exports = {
    externals: {  // 外部扩展
      "vue": "Vue"
    },
    ...
 }