记一次webpack -- 提高开发效率优化

（一）优化resolve.alias配置

resolve.alias配置通过别名来将原导⼊路径映射成⼀个新的导⼊路径，减少查找过程

resolve: {
    alias: {
      // 引入vue的时候，直接指向vue打包好之后的文件
      // 比如import Vue from 'vue/dist/vue.common.js'--> import Vue from 'vue'
      vue$: "vue/dist/vue.esm.js",
      // 减少查找过程 起别名
      "@": path.resolve(__dirname, "./src")
    }
},

（二）优化resolve.extensions配置

在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在

resolve: {
    // 在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。
    extensions: [".js", ".vue", ".json"],
},

后缀列表应尽量的少，不能滥用，会增加文件匹配的时间

（三）CSS文件的处理

1.使⽤less或者sass当做css技术栈

$ npm install less less-loader --save-dev

{
  test: /\.less$/,
  use: ["style-loader", "css-loader", "less-loader"]
}

2.使⽤postcss为样式⾃动补⻬浏览器前缀

$ npm i postcss-loader autoprefixer -D

新建postcss.config.js

module.exports = {
  plugins: [
  require("autoprefixer")({
    overrideBrowserslist: ["last 2 versions", ">1%"]
  })]
};

webpack.config.js

{
  test: /\.less$/,
  include: path.resolve(__dirname, "./src"),
  use: [
  "style-loader",
  {
    loader: "css-loader",
    options: {}
  },
  "less-loader",
  "postcss-loader"
  ]
}

（四）development vs Production模式区分打包

npm install webpack-merge -D

webpack.dev.conf.js

const merge = require("webpack-merge")
const commonConfig = require("./webpack.common.js")
const devConfig = {
// ...
}
module.exports = merge(commonConfig,devConfig)

基于命令走不同的配置文件区分
package.json

"scripts":{
	"dev":"webpack-dev-server --config ./build/webpack.dev.conf.js",
	"build":"webpack --config ./build/webpack.prod.conf.js"
}