webpack4.0基础

安装

yarn add webpack webpack-cli -D

npx webpack index.js

图片

　　file-loader

  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]', // 占位符
            outputPath: 'images/'
          }
        }
      }
    ]
  },

把图片打包成64位字符串

　　url-loader

  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]', // 占位符
            outputPath: 'images/',
            limit: 20240
          }
        }
      }
    ]
  },

样式

　　style-loader

　　　　在HTML中创建一个style标签，标签内容是css

　　css-loader

　　　　允许JS中import一个css文件，把css文件当成一个模块

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

　　sass-loader  /  node-sass

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

　　postcss-loader　　

　　　　浏览器前缀

{
  test: /\.scss$/,
  use: [
    'style-loader', 
    {
      loader:'css-loader',
        options: {
        importLoaders: 2
      }
    }
    'sass-loader',
    'postcss-loader'
  ]
}

　　配置postcss.config.js

　　　　安装 autoprefixer

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

　　模块化css

{
  loader:'css-loader',
  options: {
    importLoaders: 2,
    modules: true
  }
},

　　　　在js中引入模块css

import style from './assets/styles/global.scss'

img.classList.add(style.avatar)

字体文件

　　file-loader

{
  test: /\.(eot|svg|ttf|woff)/,
  use: 'file-loader'
},

HTML模板

　　html-webpack-plugin　　

　　　　会在打包结束后生成一个HTML文件，并把打包生成的JS自动引入到HTML文件中

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [new HtmlWebpackPlugin({
  template: './index.html'
})],

删除打包文件dist

　　clean-webpack-plugin

const CleanWebpackPlugin = require('clean-webpack-plugin')

new CleanWebpackPlugin()

devtool

　　打包生成的代码出错的时候，可以通过source map 定位错误在哪一行

devtool: 'none'  // source-map
// cheap-module-eval-source-map 开发环境
// cheap-module-source-map // 线上环境

devServer

　　webpack-dev-server

　　　　启动服务器

devServer: {
  contentBase:'/dist' // 在哪个文件启动服务器
},

　　package.json

"start": "webpack-dev-server",

　　配置跨域

proxy: {
  "/api": "http://localhost:3000"
}

热模块替换（HMR）

// devServer
devServer: {
  contentBase:'/dist',
  hot: true,
  hotOnly: true
},
// plugins
plugins: [
new webpack.HotModuleReplacementPlugin()
],

if (module.hot) {
  module.hot.accept()
}

Babel

　　babel-loader @babel/core

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }

　　@babel/preset-env  /  @babel/plugin-transform-runtime / @babel/runtime  /  @babel/runtime-corejs2

{
  "presets": [
    ["@babel/preset-env",
    ]
  ],
  
  "plugins": [
    [
      "@babel/plugin-transform-runtime", {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

React

　　@babel/preset-react

{
  "presets": ["@babel/preset-react"]
}

完整配置

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

module.exports = {

  mode: 'development',
  entry: './src/index.js',
  output: {
    filename:'[name]-[hash].js',
    path: resolve(__dirname, 'dist')
  },
  devtool:'cheap-module-eval-source-map',
  devServer: {
    contentBase:resolve(__dirname, 'dist'),
    hot: true,
    hotOnly: true
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'public/index.html')
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader:'css-loader',
            options: {
              importLoader: 2
            }
          },
          'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: 'url-loader'
      },
      {
        test: /\.(wof)$/,
        use: 'file-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}