webpack理解与基础配置格式

webpack

1. 唯一功能:打包
2. 本身只认识 js 文件
3. loader : 帮助 webpack 处理js以外的文件
4. loader先与webpack运行,预处理文件
5. 单入口、多入口 “” or {}

例如: 
css-loader
- 加载css文件
- 包装成webapck认识的状态(就是js形式,变成一个字符串)
- 让webpack编译的时候,遇到css文件不报错.
style-loader
将样式变成页面的style标签(原理就是用js的语法将css-loader生成的字符串创建一个标签)

postcss-loader
autoprefixer -- 这是一个plugin 增强webpack功能

以上loader也可自定义options,只是默认的就够用了.

file-loader   读取并且输出文件
url-loader    读取并且输出base64

dev-server
直接启动不行，必须放在scripts
  "scripts": {
    ...,
    "start": "webpack-dev-server"
  }

3.直接访问
  注意路径(内存更新了,文件没更新)

配置格式:

const path=require('path');

module.exports={
  mode: 'development',
  entry: './src/js/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']},
      {test: /\.(jpg|png|gif)$/i, use: {
        loader: 'url-loader',
        options: {
          outputPath: 'images/',
          limit: 8*1024
        }
      }},
      {test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader']},
      {
        test: /\.jsx?/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  devtool: 'source-map'
};