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:
}
}
}
]
},
样式
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基础的更多相关文章
- webpack4.0各个击破(1)—— html部分
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(2)—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(3)—— Assets篇
目录 一. Assets资源的基本处理需求 二. webpack处理引用资源 2.1 资源打标 2.2 引用优化 2.3 sprites雪碧图合成 2.4 图片压缩及其他 webpack作为前端最火的 ...
- webpack4.0各个击破(4)—— Javascript & splitChunk
目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...
- webpack4.0各个击破(5)—— Module篇
webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...
- webpack4.0各个击破(6)—— Loader篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(7)—— plugin篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(8)—— tapable篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(9)—— karma篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
随机推荐
- ionic3 图片(轮播)预览 ionic-gallary-modal组件使用方法
一.效果展示 使用方法: 1.npm安装ionic-gallary-modal扩展模块 npm install ionic-gallery-modal --save 2.在app.module.ts根 ...
- WiFi基础知识
自从只需少量的话费就可以将笔记本.平板电脑连接到互联网,WiFi已成为我们熟知的网络,并无处不在.Wi-Fi对于一些物联网应用十分有用,比如楼宇自动化.内部能源管理.WiFi的重要性对于我们的日常生活 ...
- Git分布式版本控制系统(下)
Git分布式版本控制系统(下) 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方便 ...
- 编译错误提示PATH_MAX未声明
解决办法: grep一下,发现PATH_MAX在limits.h中定义,在/scripts/mod/sumversion.c中添加#include <limits.h>即可. #inclu ...
- ruby中数组认识
a = 1...5这样赋值,a不是数组类型,1...5操作是一种枚举类型. a = ["1","2","3","4"], ...
- Delphi 虚拟桌面
Delphi创建虚拟桌面实现后台调用外部程序 核心提示:最近在做的一个软件,其中有一部分功能需要调用其它的软件来完成,而那个软件只有可执行文件,根本没有源代码,幸好,我要做的事不难,只需要在我的程序启 ...
- nginx,php-fpm性能优化
When you running a highload website with PHP-FPM via FastCGI, the following tips may be useful to yo ...
- RN 真机roload
第四步:打开调试菜单 手机设备可以通过摇一摇设备打开调试菜单,也可以打开调试菜单. 可因为是平板,摇一摇不是太方便,可以在电脑端运行命令来打开调试菜单,但有时却又无法打开调试菜单(如果是使用真机调试, ...
- thinkphp5选择redis库,让数据存入不同的redis库
thinkphp5选择redis库,让数据存入不同的redis库 在登录的时候把个人信息存入redis,选择redis库1号库, db1 读取redis里面的个人信息
- js基础关系运算符
js基础关系运算符 == 是否相等(只检查值) x=5,y='-5';x==y true === 是否全等(检查值和数据类型) x=5,y='-5';x===y false != 是否不等于 5!=8 ...