关于webpack的基本配置

---

前言

为什么要有webpack构建和打包？

• 更好的模块化管理。webpack支持模块化规范：代码分割成独立模块，并管理模块之间的依赖关系。
• 资源打包。将js文件、css文件、图片等多个资源打包成单个或多个文件，减少请求，提高加载性能性能，且webpack支持资源压缩、优化、缓存等处理。
• 转换和编译。如用Bable将ES6+代码转为向后兼容版本如ES5，将sass、less、stylus转为浏览器能识别的css代码，将ts转为js等。
• 代码拆分和懒加载。当应用程序变得复杂时，打包文件体积也会变大，导致初始加载时间太长。因此可以对代码进行拆分，按需加载。
• 插件系统和扩展性。Webpack具有强大的插件系统，提供了许多插件和工具，以满足不同项目的需求。

---

一、webpack基本配置

1.配置拆分和merge

mode表示以什么模式打包；
使用development模式，打包后的代码可阅读，没被压缩；
使用production模式，代码会被压缩。

const path = require('path');
module.exports = {
	mode:'development', // production 生产环境
	entry:{
		app: './src/main.js',
		list: './src/main.js'
	},
	output:{
		path.resolve(__dirname, 'dist');
		filename: '[name].js'
	}
}

开发环境和生产环境是不一样的，为了解决手动改更改mode带来的不便，所以将这些打包配置拆分到不同文件中：

• 通用配置：webpack.common.js
• dev配置： webpack.dev.js
• prod配置：webpack.prod.js

// webpack.common.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__dirname,'..'.'dist')
module.exports={
 entry:{
  path:path.join(srcPath,'index')
 }
}

由于我们拆分了配置，公共的一些配置项不需要在dev和prod里面再去重新写，所以我们需要把webpack.common.js分别和dev，prod建立连接。
这时需要安装webpack-merge这个插件

npm i webpack-merge -D

安装完成后需要在dev和prod里面分别引入:

// webpack.dev.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')

module.exports=merge(webpackCommonConf,{ // 合并
 mode:'development'
})

// webpack.prod.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')

module.exports=merge(webpackCommonConf,{ // 合并
  mode:'production'
  output:{
    filename:'bundle.[contentHash:8].js',
    path:path.join(distPath)
  }
})

然后修改package.json中的build命令：

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

生产模式打包：npm run build
开发模式打包：npm run devBuild

2. 启动服务

1）

// webpack.common.js
//首先使用 npm i html-webpack-plugin -D 安装 html-webpack-plugin
// 然后配置入口文件，启动服务后会打包生成html文件
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
 plugins:[
   new HtmlWebpackPlugin({
     template:path.join(srcPath,'index.html'),
     filename:'index.html'//打完包以后的文件名称
     chunks:["index"] //这里的chunks代表的意思是引入的是哪一个入口文件，我引入的就是src下建立的index.js文件
  })
 ]
}

2）安装 npm i webpack-dev-server -D

// webpack.dev.js 版本4.x
module.exports=merge(webpackCommonConf,{
 devServer:{
  port:3000,
  static:distPath,//根目录
  open:true,//自动打开浏览器
  compress:true,//启动压缩
  //如果需要跨域请求接口
  proxy:{
   '/api':{
        target:'http://localhost:3000'
      }
  }
 }
})

3. 配置dev命令，在package.json文件中

"script":{
  "dev":"webpack-dev-server --config build/webpack.dev.js"
}

npm run dev启动服务。

3、处理es6，配置babel

对于现代浏览器而言，有些ES6语法是无法被解析的，因此需要babel将ES6解析ES5，这也解决了浏览器兼容性问题。
1）首先安装babel-loader：

npm i babel-loader -D //我这里是^8.0.6版本的
npm i babel-core -D//babel-core包含了一些babel里面的api
npm i babel-preset-env -D //提供执行环境

2）在根目录新建.babelrc文件

{
  "presets": ["babel-preset-env"],
  "plugins": []
}

3）在webpack.common.js中配置babel

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

4、处理样式

一般也是在webpack.common.js中配置，无论在开发模式还是生产模式都需要处理样式。

1）对于css文件
安装：

npm i css-loader -D
npm i style-loader -D

配置如下：

module:{
 rules:[
  {
   test:/\.css$/,
   loader:['style-loader','css-loader']//执行顺序为从后到前
  }
 ]
}

2）对于less等预处理器
安装：

npm i less -D
npm i less-loader -D

配置：

module:{
 rules:[
  {
  test:/\.less/,
  loader:['style-loader','css-loader','less-loader']
  }
 ]
}

3）postcss-loader可以做兼容浏览器，有些css语法不是所有浏览器都兼容，postcss-loader就可以帮我们做这些事情。
postcss-loader是一个比较大的插件，里面可以再引入一些别的功能，如autoprefixer：

安装 : npm install postcss autoprefixer

在公共配置文件中配置postcss：

{
	test: /\.css$/,
	// loader 的执行顺序是：从后往前
	loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},

配置autoprefixer，新建postcss.config.js，配置如下代码：

module.exports = {
    plugins: [require('autoprefixer')]
}

autoprefixer是一个后处理程序，而可以同sass、stylus或less等预处理器共同使用。它适用于普通的css，无需关心你要为哪些浏览器加前缀，只需关注于实现，并使用w3c最新规范。一般配合postcss一起使用

5、处理图片

对于图片的处理一般分为dev和prod环境下的处理，主要原因是图片一般是在根目录下，打包以后希望全部输出到img文件夹里面，而且需要对图片的大小做一些精细化的配置处理。

对图片的使用有这三种：

• 在html中的src标签中使用
• 在js中import中使用
• 在css中使用，比如背景图片

对于第一种，需要安装html-withimg-loader：

npm i html-withimg-loader -D //^0.1.16

module:{
 rules:[
  {
    test:/\.html$/
    use:'html-withimg-loader'
  }
 ]
}

对于第二种和第三种情况：安装file-loader

npm i file-loader -D

module:{
 rules:[{
   test:/\.(jpg|png|gif)$/,
   use:'file-loader'
 }]
}

webpack.prod.js,在这个文件里对图片做一些精细化配置，需要安装url-loader：

npm i url-loader -D

module:{
 rules:[{
  test:/\.(png|jpg|gif)$/,
  use:{
   loader:'url-loader',
   options:{
      limit:1024*5,//小于5kb的图片会被输出为base64格式
      outputPath:"/img/" //全部输出到img文件夹里面
    }
   }
 }]
}

---