安装

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:
}
}
}
]
},

样式

  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:
}
}
'sass-loader',
'postcss-loader'
]
}

  配置postcss.config.js

    安装 autoprefixer

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

  模块化css

{
loader:'css-loader',
options: {
importLoaders: ,
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": ,
"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:
}
},
'postcss-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders:
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: 'url-loader'
},
{
test: /\.(wof)$/,
use: 'file-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
}

webpack4.0基础的更多相关文章

  1. webpack4.0各个击破(1)—— html部分

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  2. webpack4.0各个击破(2)—— CSS篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  3. webpack4.0各个击破(3)—— Assets篇

    目录 一. Assets资源的基本处理需求 二. webpack处理引用资源 2.1 资源打标 2.2 引用优化 2.3 sprites雪碧图合成 2.4 图片压缩及其他 webpack作为前端最火的 ...

  4. webpack4.0各个击破(4)—— Javascript & splitChunk

    目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...

  5. webpack4.0各个击破(5)—— Module篇

    webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...

  6. webpack4.0各个击破(6)—— Loader篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  7. webpack4.0各个击破(7)—— plugin篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  8. webpack4.0各个击破(8)—— tapable篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  9. webpack4.0各个击破(9)—— karma篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

随机推荐

  1. ionic3 图片(轮播)预览 ionic-gallary-modal组件使用方法

    一.效果展示 使用方法: 1.npm安装ionic-gallary-modal扩展模块 npm install ionic-gallery-modal --save 2.在app.module.ts根 ...

  2. WiFi基础知识

    自从只需少量的话费就可以将笔记本.平板电脑连接到互联网,WiFi已成为我们熟知的网络,并无处不在.Wi-Fi对于一些物联网应用十分有用,比如楼宇自动化.内部能源管理.WiFi的重要性对于我们的日常生活 ...

  3. Git分布式版本控制系统(下)

    Git分布式版本控制系统(下) 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方便 ...

  4. 编译错误提示PATH_MAX未声明

    解决办法: grep一下,发现PATH_MAX在limits.h中定义,在/scripts/mod/sumversion.c中添加#include <limits.h>即可. #inclu ...

  5. ruby中数组认识

    a = 1...5这样赋值,a不是数组类型,1...5操作是一种枚举类型. a = ["1","2","3","4"], ...

  6. Delphi 虚拟桌面

    Delphi创建虚拟桌面实现后台调用外部程序 核心提示:最近在做的一个软件,其中有一部分功能需要调用其它的软件来完成,而那个软件只有可执行文件,根本没有源代码,幸好,我要做的事不难,只需要在我的程序启 ...

  7. nginx,php-fpm性能优化

    When you running a highload website with PHP-FPM via FastCGI, the following tips may be useful to yo ...

  8. RN 真机roload

    第四步:打开调试菜单 手机设备可以通过摇一摇设备打开调试菜单,也可以打开调试菜单. 可因为是平板,摇一摇不是太方便,可以在电脑端运行命令来打开调试菜单,但有时却又无法打开调试菜单(如果是使用真机调试, ...

  9. thinkphp5选择redis库,让数据存入不同的redis库

    thinkphp5选择redis库,让数据存入不同的redis库 在登录的时候把个人信息存入redis,选择redis库1号库, db1 读取redis里面的个人信息

  10. js基础关系运算符

    js基础关系运算符 == 是否相等(只检查值) x=5,y='-5';x==y true === 是否全等(检查值和数据类型) x=5,y='-5';x===y false != 是否不等于 5!=8 ...