webpack基本配置

webpack基本配置

拆分配置和merge

webpack.common.js

wepack.dev.js

webpack.prod.js

我们在dev/prod文件中

/*****省略部分不重要****/
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')

module.exports = smart(webpackCommonConf,{
	mode: 'development'
  /**********/
})

启动本地服务

// webpack.dev.js
{
	/********/
  devServer: {
        port: 8080,
        progress: true,  // 显示打包的进度条
        contentBase: distPath,  // 根目录
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩

        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }
}

webpack开发下跨域请求，使用devserver中的代理

处理ES6

{
	...
  module: {
  	rules: [
      {
      	test: /\.js$/,
        loader: ['babel-loader'],
        include: srcPath,
        exclude: /node_modules/
      }
    ]
  }
}

// .babelrc
{
	"presets": ["@babel/preset-env"],
  "plugins": []
}

处理样式

{
...
	module: {
  	rules: [
      {
      	test: /\.css$/,
        // loader执行顺序，从后往前的
        loader: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
      	test: /\.less$/,
        loader: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}

// postcss.config.js
/*
	加浏览器前缀的
*/
module.exports = {
	plugins: [require('autoprefixer')]
}

处理图片

// webpack.dev.js
module: {
	rules: [
    {
      // 直接引入url
    	test: /\.(png|jpg|jpeg|gif)$/,
      use: 'file-loader'
    }
  ]
}

// webpack.prod.js
module: {
	rules: [
    {
    	test: /\.(png|jpg|jpeg|gif)$/,
      use: {
      	loader: 'url-loader',
        options: {
          // 小于 5kb 的图用base64输出
          // 否则，依然沿用 file-loader 的形式，产出url
        	limit: 5 * 1024,
          
          // 打包到 img 目录下
          outputPath: '/img/'
          
          // 设置图片的 cdn 地址
          // publicPath: 'http://cdn.abc.com'
        }
      }
    }
  ]
}

output

output: {
  filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
	path: distPath
}
// 为的是内容变，避开缓存