webpack 配置 - 开发环境

webpack打包工具

概念

.vue .sass .less等很多文件浏览器识别不了，就需要编译打包成js文件

五大核心

入口（entry），输出（output），loader，插件（plugins），模式（Mode）

使用

打包时会从入手文件开始，找相互依赖的文件

全局安装 npm install webpack webpack-cli -g

当前目录下安装 npm install webpack webpack-cli --save-dev

基础打包

需要入口文件，-o 指定输出文件，开发模式

开发：webpack ./src/index.js -o ./dist/bundle.js --mode=development

生产：webpack ./src/index.js -o ./dist/bundle.js --mode=production（压缩跟混淆）

webpack默认可以处理js，json文件

生产环境下比开发环境多了一个代码的压缩跟混淆

webpack.config.js - 配置文件

打包指令直接输入：webpack

当前文件所在目录：path.resolve(_dirname)

entry：打包的入口文件

output：输出的文件名称和路径

loader：对某种格式文件转换成js，配置放在module里,通过在rules里匹配类型文件

plugins：配置插件 mode: 模式 development/ production

打包样式资源

需要配置loader 安装依赖：npm install style-loader css-loader --save-dev

css-loader：将css文件转换为js

style-loader：将js的样式内容插入到style标签内

use数组里的loader执行顺序，是从下到上，所有先写 style-loader 再写 css-loader

打包图片资源

需要配置loader

安装依赖：npm install url-loader file-loader html-loader --save-dev

url-loader和file-loader：打包css 图片（url-loader依赖file-loader）

html-loader：打包html文件的img图片（负责引入img，从而被url-loader进行处理）

配置项

limit为8*1024：当图片小于8kb，使用base64处理，减少请求数量，但是会使体积更大

图片的base64编码，是随着html下载时把图片数据转成一串字符串下载到本地，不用再向服务器发送请求（优化点！）

esModule为false ：因为url-loader默认使用es6模块化解析而html-loader引入图片是commonJS，解析时会出现问题：[object Module]

name为'[hash:10].[ext]' ：图片名称是一个hash值，hash:10取hash的前10位，[ext]取图片的扩展名

打包html资源

需要配置plugins插件

安装依赖：npm install html-webpack-plugin --save-dev

new HtmlWebpackPlugin() 功能：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）

new HtmlWebpackPlugin({ template: './src/index.html' }) 复制 './src/index.html' 文件，并自动引入打包输出的所有资源

打包其他资源（除了html/js/css资源以外的资源）

需要用到exclude，配置 file-loader

开发服务器 devServer

用来自动化（自动编译，自动打开浏览器，自动刷新浏览器），简称热更新

特点：只会在内存中编译打包，不会有任何输出

依赖：npm install webpack-dev-server -g

打包指令直接输入：webpack-dev-server

配置项

contentBase: path.resolve(_dirname,'build') - 项目构建路径是build不是src

compress: true - 启动gzip压缩，使浏览器更快的加载和打开

post: 3000 - 服务器端口号

open: true - 自动打开浏览器

输出到指定目录

css最后会打包到js里，指定目录打包只能针对js，图片和其他资源

需要在options 里设置 outputPath 属性为打包后的文件名，打包后的文件就会在该文件名下

开发环境的基本配置

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 入口文件
  entry: "./src/index.js",
  output: {
     // 输出的文件名称
     filename:"bundle.js",
     // 输入路径，绝对路径
     path: path.resolve(_dirname,'build')
  },
  mode: 'development',
  // loader的配置
  module:{
      // 对某个格式文件进行转化处理,规则：正则匹配文件
      rules:[
          {
          	test: /\.less$/, // 处理less资源
          	use:[
            	// use数组里的loader执行顺序，是从下到上
          		"style-loader", //将js的样式内容插入到style标签内
          		"css-loader" // 将css文件转换为js
                "less-loader"
      	  	]
          },
          {
          	test: /\.css$/, // 处理css资源
          	use:[
            	// use数组里的loader执行顺序，是从下到上
          		"style-loader", //将js的样式内容插入到style标签内
          		"css-loader" // 将css文件转换为js
      	  	]
          },
          // 匹配图片文件
          {
              test: /\.(jpg|png|gif)$/,
              // 图片小于8kb，使用base64处理，减少请求数量，但是会使体积更大
              loader: 'url-loader',
              options: {
                  limit:8*1024, // 8kb
                  esModule:false, // 关闭url-loader的es6模板化解析，会与html-loader有冲突
                  name: '[hash:10].[ext]' //[hash:10]取hash的前10位，[ext]取图片的扩展名
              }
          },
          // html通过img使用图片
          {
              test: /\.html$/,
              loader:'html-loader'
          },
          {
          
              exclude: /\.(html|css|js)$/, //排除css/js/html资源
              loader:'file-loader',
              outputPath: '文件名' // 如果需要输出在指定目录下
          }
      ]
  },
  plugins:[
      new HtmlWebpackPlugin({
          // 将打包后的js跟html整合在一起
          template: "./src/index.html"
      })
  ],
  devServer:{
      contentBase:path.resolve(_dirname,'dist'), // 项目构建路径
      compress: true,//启动gzip压缩，使浏览器更快的加载和打开
      post:3000, // 服务器端口号
      open: true, //自动打开浏览器
  }
}