webpack基础学习

webpack

webpack是一个现代的js应用的静态模块打包工具，简单理解就是用于模块化开发和打包。它的运行依赖于Nodejs环境(前端模块化打包工具)

gulp和webpack的不同

gulp更加强调的是前端流程的自动化,模块化不是它的核心。
webpack更加强调模块化开发管理,而文件压缩合并,预处理等功能,是它附带的功能。

webpack的安装

安装webpack前首先需要安装Node.js,Node.js自带了软件包管理工具npm
利用npm install webpack安装。

webpack的基本使用

在命令行工具中使用:webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development

loader

loader使用过程:
通过npm安装需要使用的路径,
在webpack.config.js中的moudles关键字下进行配置

CSS文件的配置

module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
  }

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样
style-loader则会把 CSS 插入到 DOM 中

less文件的处理

module.exports={
    // 入口:可以是字符串/数组/对象,这里我们入口只有一个,所以写一个字符串即可
    entry:'./src/main.js',
    // 出口:通常是一个对象,里面至少包含两个重要属性 filename和path
    output:{
        path:path.resolve(__dirname,'dist'),// path是一个绝对路径
        filename:'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
          {
            test: /\.less$/,
            use: [
              {
                loader: "style-loader",
              },
              {
                loader: "css-loader",
              },
              {
                loader: "less-loader"
              }
        ]
      }
    ]
}
}

将less转化为CSS中的loader

图片文件的处理

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
               // 当加载的图片大小,小于limit时,会将图片编译成base64字符串格式
              // 当加载的图片大小,大于limit时,则会报错 需要安装并使用file loader模块
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

ES6语法处理

 {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

想要了解更多的话,可以进入官网查询 https://webpack.docschina.org/