webpack4入门
前提
- 已安装node(版本号>4.0，已自带NPM)
- mac机器
- 有一个空目录
无webpack.config.js配置打包
快速构建
package.json文件。
npm init -y安装webpack4及其命令行接口
npm i webpack webpack-cli --save-devpackage.json文件增加build参数
"scripts": {
"build": "webpack"
}
- 创建
./src/index.js文件
增加内容
console.log(`这是入口文件`);
- 终端执行
npm run build
目录下多了一个./dist/main.js。
这个文件是webpack对./src/index.js的打包结果。
production和development模式
- 修改
package.json文件的scripts字段
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
- 分别执行
npm run dev或npm run build
你会看到./dist/main.js不同的变化。
production模式下，默认对打包的进行minification(文件压缩)，Tree Shaking(只导入有用代码)，scope hoisting（作用域提升）等等操作。
总之是让打包文件更小。
development模式下，对打包文件不压缩，同时打包速度更快。
如果没指定任何模式，默认是production模式。
ES6和React
安装对应依赖包
npm i babel-core babel-loader babel-preset-env react react-dom babel-preset-react --save-dev新建
.babelrc文件，进行相关配置
{
"presets": ["env", "react"]
}
- 新建
webpack.config.js文件，进行相关配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
- 新增
./src/app.js以及修改./src/index.js
./src/app.js内容如下：
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
./src/index.js内容如下：
import App from "./App";
- 终端执行
npm run build
使用html-webpack-plugin插件对html进行打包
新建./src/index.html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack4入门</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
安装依赖包。
npm i html-webpack-plugin html-loader --save-dev
修改webpack.config.js配置。
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
终端执行npm run build命令。
你会看到项目多了个./dist/index.html文件。
使用webpack-dev-server插件
安装依赖包。
npm i webpack-dev-server --save-dev
修改package.json文件。
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
修改webpack.config.js文件，新增devServer配置。
devServer: {
contentBase: require('path').join(__dirname, "dist"),
compress: true,
port: 8033,
host: "127.0.0.1",
}
终端执行npm run start便可以启动webpack dev server。
使用Hot Module Replacement
Hot Module Replacement有针对React，Vue，Redux，Angular，样式等等。
这里我们以React Hot Loader为例。
安装依赖包。
npm i react-hot-loader --save-dev
修改.babelrc文件，新增plugins选项。
{
"plugins": ["react-hot-loader/babel"]
}
修改webpack.config.js文件。
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack'); // 新增
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new webpack.NamedModulesPlugin(), // 新增
new webpack.HotModuleReplacementPlugin() //新增
],
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8033,
host: "127.0.0.1",
hot: true // 新增
}
};
修改./src/app.js文件内容如下：
import React from "react";
import ReactDOM from "react-dom";
import { hot } from 'react-hot-loader' // 新增
const App = () => {
return (
<div>
<p>这是一个测试文件！真得是动态更新啊</p>
<div>好棒棒啊</div>
</div>
);
};
export default hot(module)(App); // 修改
ReactDOM.render(<App />, document.getElementById("app"));
终端执行npm run start便可以启动webpack dev server。
然后修改./src/app.js看下效果。
参考
https://www.valentinog.com/blog/webpack-4-tutorial/
webpack4入门的更多相关文章
- webpack4入门到进阶案例实战课程
愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...
- webpack4入门配置
下面是抄过来的,方便自己翻越 webpack4.x入门配置 1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...
- 显微镜下的webpack4入门
前端的构建打包工具很多,比如grunt,gulp.相信这两者大家应该是耳熟能详的,上手相对简单,而且所需手敲的代码都是比较简单的.然后webpack的出现,让这两者打包工具都有点失宠了.webpack ...
- 【Cute-Webpack】Webpack4 入门手册（共 18 章）
介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...
- webpack4 入门配置研究
1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...
- webpack4 入门（一）
一.简介 WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,less, TypeScript等),并 ...
- webpack4.*入门笔记
全是跟着示例做的.看下面文章 入门 1.nodejs基础 http://www.runoob.com/nodejs/nodejs-tutorial.html 2.NPM 学习笔记整理 https:// ...
- webpack4 入门（二）
一.管理输出 1.多入口配置 entry: { index1: './src/index.js', index2: './src/index2.js' }, output: { filename: ' ...
- 【Redis】349- Redis 入门指南
点击上方"前端自习课"关注,学习起来~ 1. 概述 1.1. Redis 简介 Redis 是速度非常快的非关系型(NoSQL)内存键值数据库,可以存储键和五种不同类型的值之间的映 ...
随机推荐
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- Java远程连接redis, 报错 Connection refused: connect
在今天的学习Redis中报错 Connection refused: connect 我总结了有三种情况: 1.远程服务器中的Redis没有开启. 2.远程连接地址出错,或者是端口出错. 3.远程服务 ...
- ArrayList 的代码
public class user { private String userName; //类的构造方法 public user (String userName ){ this.userName= ...
- Codeforces 1089E - Easy Chess - [DFS+特判][2018-2019 ICPC, NEERC, Northern Eurasia Finals Problem E]
题目链接:https://codeforces.com/contest/1089/problem/E Elma is learning chess figures. She learned that ...
- Luogu 1068 - 分数线划定 - [快速排序]
题目链接:https://www.luogu.org/problemnew/show/P1068 题目描述世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,A 市对所有报名的选手 ...
- 树莓派3 之 安装Mysql服务
需求 在树莓派上 安装Mysql 服务,并开启远程访问 步骤 安装 mysql server $ sudo apt-get install mysql-server 我以为中间会让我提示输入 数据库r ...
- RabbitMQ的消息确认机制
一:确认种类 RabbitMQ的消息确认有两种. 一种是消息发送确认.这种是用来确认生产者将消息发送给交换器,交换器传递给队列的过程中,消息是否成功投递.发送确认分为两步,一是确认是否到达交换器,二是 ...
- DAX/PowerBI系列 - 累计总计(Cumulative Total)
DAX/PowerBI系列 - 累计总计(Cumulative Total) 2017/07/23 更新:B列公式(见最后) 难度: ★★☆☆☆(2星) 适用: ★★☆☆☆(2星) 概况: 这个模式普 ...
- 实现html页面自动刷新的几种方式
自动页面刷新通常会用在对数据的实时性比较敏感的网站中,比如股票走势等,另外在普通的页面自动跳转中也会使用到页面自动刷新技术. 页面刷新我见过的有三种方式,下面来一一说明 1.通过在<head&g ...
- 深入探讨java类加载器
概览 类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态加载到 Java 虚拟机中并执行.类加载器从 JDK 1.0 就出现了,最初是为了满足 ...