前提

  • 已安装node(版本号>4.0,已自带NPM)
  • mac机器
  • 有一个空目录

无webpack.config.js配置打包

  1. 快速构建package.json文件。

    npm init -y

  2. 安装webpack4及其命令行接口

    npm i webpack webpack-cli --save-dev

  3. package.json文件增加build参数

"scripts": {
"build": "webpack"
}
  1. 创建./src/index.js文件

    增加内容
console.log(`这是入口文件`);
  1. 终端执行npm run build

    目录下多了一个./dist/main.js

    这个文件是webpack./src/index.js的打包结果。

productiondevelopment模式

  1. 修改package.json文件的scripts字段
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
  1. 分别执行npm run devnpm run build

    你会看到./dist/main.js不同的变化。

    production模式下,默认对打包的进行minification(文件压缩),Tree Shaking(只导入有用代码),scope hoisting(作用域提升)等等操作。

    总之是让打包文件更小。

    development模式下,对打包文件不压缩,同时打包速度更快。

如果没指定任何模式,默认是production模式。

ES6和React

  1. 安装对应依赖包

    npm i babel-core babel-loader babel-preset-env react react-dom babel-preset-react --save-dev

  2. 新建.babelrc文件,进行相关配置

{
"presets": ["env", "react"]
}
  1. 新建webpack.config.js文件,进行相关配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
  1. 新增./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";
  1. 终端执行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入门的更多相关文章

  1. webpack4入门到进阶案例实战课程

    愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...

  2. webpack4入门配置

    下面是抄过来的,方便自己翻越 webpack4.x入门配置   1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...

  3. 显微镜下的webpack4入门

    前端的构建打包工具很多,比如grunt,gulp.相信这两者大家应该是耳熟能详的,上手相对简单,而且所需手敲的代码都是比较简单的.然后webpack的出现,让这两者打包工具都有点失宠了.webpack ...

  4. 【Cute-Webpack】Webpack4 入门手册(共 18 章)

    介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...

  5. webpack4 入门配置研究

    1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...

  6. webpack4 入门(一)

    一.简介 WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,less, TypeScript等),并 ...

  7. webpack4.*入门笔记

    全是跟着示例做的.看下面文章 入门 1.nodejs基础 http://www.runoob.com/nodejs/nodejs-tutorial.html 2.NPM 学习笔记整理 https:// ...

  8. webpack4 入门(二)

    一.管理输出 1.多入口配置 entry: { index1: './src/index.js', index2: './src/index2.js' }, output: { filename: ' ...

  9. 【Redis】349- Redis 入门指南

    点击上方"前端自习课"关注,学习起来~ 1. 概述 1.1. Redis 简介 Redis 是速度非常快的非关系型(NoSQL)内存键值数据库,可以存储键和五种不同类型的值之间的映 ...

随机推荐

  1. Java中的日期格式转化

    package lianxi; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util ...

  2. oracle 数据库、实例、服务名、SID

    参考:http://www.zhetao.com/content240 在实际的开发应用中,关于Oracle数据库,经常听见有人说建立一个数据库,建立一个Instance,启动一个Instance之类 ...

  3. stm8 iar开发

    1.一份官方库基本是通用的. 2.尽量依托cubex for stm8 依托理由: 1.不同型号,不同后缀的芯片,将会被配置不同的外设.比如stm8s103k3系列可能有的是串口1,但是stm8s10 ...

  4. Markdown编辑工具及命令

    Markdown是一种可以使用普通文本编辑器编辑的标记语言,通过使用简单的编辑,可以使文本具有一定的格式. Typora是一款简介的Markerdown编辑器. 文本编辑语法: 标题: # 一阶标题 ...

  5. 什么是Rollback Segment(已truncate和delete 命令为例)?

    Rollback Segments是在你数据库中的一些存储空间,它用来临时的保存当数据库数据发生改变时的先前值,Rollback Segment主要有两个目的: 1. 如果因为某种原因或者其他用用户想 ...

  6. 并行开发-Task

    Task 对于多线程,经常使用的是Thread.在了解Task之前,如果要使用多核的功能可能就会自己来开线程,然而这种线程模型在.net 4.0之后被一种称为基于“任务的编程模型”所冲击,这就是Tas ...

  7. 图->连通性->关节点和重连通分量

    文字描述 相关定义:假若在删去顶点v以及和v相关联的各边之后,将图的一个连通分量分割成两个或两个以上的连通分量,则称顶点v为该图的一个关节点.一个没有关节点的连通图称为重连通图. 在重连通图上,任意一 ...

  8. bootstrap 中关于 HTML5 aria-* and role的用法

    HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Ap ...

  9. 五、UI开发之核心基础——约束(深入)

    概述 本节我们将较为理论的讲述约束,更准确的说法叫做“AutoLayout”.对于后续章节要学习的内容,本篇文章并非必须,如果你也像我当年一样正在被老板踢屁股赶进度的话,但可掠过本篇. 本篇内容旨在锦 ...

  10. ECMAScript6 入门教程 初学记录let命令 块级作用域

    一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...