webpack开发环境的使用

webpack依赖关系图

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

在磁盘中新建目录webpack及其子目录：css、js…,并初始化npm(用于安装各种包、插件)

index.js
index.html
index.less

新建webpack.config.js文件，编写webpack配置

webpack.config.js配置如下：

/**
 * 开发环境的配置：能让代码运行即可
 * 运行项目指令：webpack会将打包结果输出出去
 *               npx webpack-dev-server只在内存中打包，没有输出
 */

const {resolve}  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
  entry:"./src/js/index.js",
  output:{
    path:resolve(__dirname,'build'),
    filename:'./js/bundle.js'
  },
  module:{
    rules:[
      //处理less样式资源
     {
       test:/\.less$/,
       use:['style-loader','css-loader','less-loader'],//loader是按照从右往左、从下往上的执行顺序执行的。
       /**
        * less-loader讲less文件转化为css文件，然后css-loader将css文件加入到js文件中，style-loader将js文件添加得到style标签内并嵌入到head标签里
        */
     },
     //处理css资源
     {
       test:/\.css$/,
       use:['style-loader','css-loader']
     },
    //处理style样式图片资源
     {
      test:/\(jpg|png|gif)$/,
      loader:'url-loader',
      options:{
        limit:8 * 1024,//当图片大小低于limit的大小时采用base64编码，打包后图片内存大小会变大，一般在图片大小为8-15kb左右时采用limit
        name:'[hash:10].[ext]',//以打包的hash值的前10位作为名称，[ext]后缀和原来保持一致
        esModule:false,//关闭es6的解析模式，采用commonjs的解析模式
        outputPath:'imgs'//输出到img这个文件夹下
      }
     },
     //处理html中的image图片资源
     {
       test:/\.html$/,
       loaser:'html-loader',//解析模式为commonjs
     },
     //处理其他资源
     {
      exclude:/\.(css|less|text|js|png|jpg|gif|html)$/,
      loader:'file-loader',//url-loader是file-loader的扩展，多了limit对图片的压缩功能
      options:{
        name:'[hash:10].[ext]',
        outputPath:'media'
      }
     }
    ]
  },
  plugins:[new HtmlWebpackPlugin({template:'./src/index.html'})],
  //自动化实现自动编译打包、输出、打开浏览器
  devServer:{
    contenBase:resolve(__dirname,'build'),//指定chunk的目录
    compress:true,
    port:300,
    open:true
  },
  mode:'development'
}