webpack入门(二):配置webpack.config.js

一.介绍

 webpack.config.js 是webpack的配置文件

 作用:指示webpack 干那些活(当你运行webpack指令时,会加载里面的配置)

所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs

 

webpack.config.js文件中，主要包括

entry:入口文件

output:出口文件

module:模块

plugins:插件

二.配置webpack

现在开始配置webpack，目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有些麻烦，所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。

npm install html-webpack-plugin --save-dev

好 有了这个插件 开始写config文件

//resolve 用来拼接绝对路径的方法
const {resolve} = require('path')
const HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
  //webpack配置
  //入口起点
  entry: './src/index.js',
  //输出
  output: {
    //输出文件名
    filename: 'built.js',
    //输出路径
    //__dirname nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  
  //plugins的配置
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ],
//模式
  mode: 'development', //生产环境
  // mode:'production,'//开发环境

}

src/index.js代码如下:

function add(x,y) {
  return x + y;
}
console.log(add(1,2));

然后在项目根目录运行

webpack

终端显示一堆信息，然后告诉你成功了。

你会发现多出来一个build文件夹，里面成功生成了html,点开html,控制台里面会有一个console.log的值:3.

三.使用webpack打包各种资源(loader)

通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss、less为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

• test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
• loader：loader的名称（必须）
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）

const {resolve} = require('path');
const HtmlWebackPlugin = require('html-webpack-plugin');
module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build'),
    //如果不是服务器打开的话,需要配置publicPath来引用文件
    // publicPath:'./'
  },
  module:{
    rules:[
      {
        //打包less资源
        test:/\.less$/,
        //使用多个loader处理用use
        use:[
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        //打包css资源
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        //处理图片资源
        test:/\.(jpg|png|gif)$/,
        //使用一个loader
        //下载url-loader
        loader:'url-loader',
        options:{
          //图片大小小于8kb,就会被base64处理
          //优点:减少请求数量(减轻服务器压力)
          //缺点:图片体积会更大(文件请求速度更慢)
          limit:8*1024,
          //因为url-loader没人使用ES6模块化解析，二html-loader引入图片是CommonJs
          //解析时会出问题：【object Module】
          //解决这个问题就需要关闭url-loader的ES6模块化，使用CommonJs解析
          //如果写在这里没有解决问题,那么就把esModule:false写到下面处理html文件的options中
          esModule: false,
          //[hash:10]取图片的hash的前5位
          //[ext]取文件原来扩展名
          name:'[hash:5].[ext]',
        }
      },
     {
        test: /\.html$/,
        //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
          loader: 'html-loader',
     },
     {
       //排除css|js|html资源
       exclude: /\.(css|js|html)$/,
       loader: 'file-loader',
       options: {
         name: '[hash:10].[ext]'
       }
     }
    ]
  },
  plugins:[
    new HtmlWebackPlugin({
      template:'./src/index.html'
    })
  ],
  mode: 'development',
}

看loaders的书写方式，test里面包含一个正则，包含需要匹配的文件，use是一个数组，包含要处理这些程序的loaders，use数组中loader执行顺序:从右到左,从下到上,依次进行

根据你所需要打包的资源,下载所对应的loader插件

例如:我需要打包样式资源,那么就需要下载

css-loader和style-loader

npm install css-loader style-loader --save-dev

或者

npm install css-loader style-loader -D

四.配置webpack-dev-server

上面任务虽然完成了，但是我们要不断运行程序然后查看页面，所以最好新建一个开发服务器，可以serve我们打包以后的代码，并且当代码更新的时候自动刷新浏览器。

安装webpack-dev-server

npm install webpack-dev-server --save-dev

安装完毕后 在webpack.config.js中添加配置

module.exports = {
  ....
  devServer:{
    contentBase:resolve(__dirname,'build'),
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    open:true
  }
  ...
}

 

• 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器~~)
• 特点:只会在内存中编译打包,不会有任何输出
• 启动devServer指令为:webpack serve

 结语

• loader是webpack的核心之一,它能用来打包非js模块,转化为 webpack能够解析模块来使用
• loader当中每个模块都有不同的规则,所以相应的使用 不同的 loader来解析该模块
• 注意test是一个正则匹配,不要在它外层包一层 " "
• rules是数组形式,use可以是 数组 也可以是 字符串