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
}
// 为的是内容变,避开缓存
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值