聊聊webpack 4
前言
hello,小伙伴们,本篇仓库出至于我的GitHub仓库 web-study ,如果你觉得对你有帮助的话欢迎star,你们的点赞是我持续更新的动力
webpack
打包工具
webpack
毫无疑问现在是非常火热的前端自动化打包工具,本系列教程是基于最新版 webpack 4.X.X
来编写。
webpack 4:零配置开始
- 创建一个目录然后进入,初始化生成
package.json
文件
md webpack-4-quickstart
cd webpack-4-quickstart
npm init -y
- 安装
webpack4
和webpack-cli
npm install webpack webpack-cli --save-dev
- 打开
package.json
添加构建脚本:
"scripts": {
"build": "webpack"
}
- 创建入口文件:
index.js
,webpack4
默认入口文件为/src/index.js
console.log('hello world!')
- 打包构建
npm run build
你会在 ~/webpack-4-quickstart/dist/main.js
得到你打包后的文件。
Webpack 4: 生产和开发模式
创建 webpack.config.js
webpack
配置文件,webpack 4
介绍了生产( production
) 和开发( development
) 两种模式,需要通过 mode
属性指定。
在webpack.config.js
文件中指定mode
属性为 development
,再次打包文件。(npm run build
)。
可以看到main.js
文件中的代码没被压缩,哈哈,这就是 webpack
的厉害之处,可以分模式开发。
webpack 4:覆盖默认的入口/出口文件
在 webpack.config.js
文件中通过 entry
属性指定打包的入口文件,output
属性指定打包后的出口文件。
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/hello.js',
output: {
path: path.resolve(__dirname, 'dist'), // 这里必须指定一个绝对路径
filename: 'hello.js'
}
}
再次打包,就会打包 ./src/hello.js
,输出 ./dist/hello.js
。
webpack 4:用 Babel 7 转译 ES6 的 js 代码
现在大家都习惯用 ES6 写 Javascript。
但是不是所有浏览器都知道怎么处理 ES6。我们需要做一些转换。
这个转换的步骤叫做 transpiling
。transpiling
是指把 ES6 转译成浏览器能够识别的代码。
webpack 本身并不知道如何去转换,但是有 loaders
。把他们想象成转换器。
babel-loader
是 webpack 的一个 loader,可以把 ES6 以上的代码转译成 ES5。
为了使用这个 loader 我们需要去安装一系列的依赖。特别是:
- babel-core
- babel-loader
- babel-preset-env (for compiling Javascript ES6 code down to ES5)
先安了吧:
npm i babel-core babel-loader babel-preset-env --save-dev
下一步我们在项目目录下建立一个 .babelrc
文件用来配置 Babel。
{
"presets": ["env"]
}
配置完成后通过配置文件使用 babel-loader
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
webpack 4:HTML 插件
webpack
需要两个额外的组件去处理 HTML:html-webpack-plugin
和 html-loader
。
先安装:
npm i html-webpack-plugin html-loader --save-dev
webpack 的配置 html-loader
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true } // 是否压缩代码
}
]
}
... 插件使用...
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
在 ./src/index.html
新建一个 HTML 文件(模板文件,用来给webpack
打包)
最后运行 npm run build
重新打包,查看 ./dist 目录,你会看到运行后的结果。
没有必要在你的 HTML 文件中引入你的 JavaScript:它会自动地注入进去。
在浏览器打开 ./dist/index.html:你可以看到最后的结果。
webpack 4: 提取 CSS 到文件中
mini-css-extract-plugin
插件用来提取 CSS 到文件中。
安装它:
npm i mini-css-extract-plugin css-loader --save-dev
然后建立一个 CSS 文件用来测试:
body {
line-height: 2;
}
配置 loader 和 plugin:
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
...插件使用...
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
最后在入口文件中引入 CSS:
import style from './main.css'
构建:
npm run build
查看 ./dist
目录,你应该能看到 CSS 的结果!
重点回顾:extract-text-webpack-plugin
在 webpack 4 中不能用了。请使用 mini-css-extract-plugin
。
webpack 4:webpack dev server
一旦配置了 webpack dev server
它会在浏览器中加载你的 app。
只要你改变了文件,它会自动地刷新浏览器的页面。
安装下面的包来搭建 webpack dev server
:
npm i webpack-dev-server --save-dev
然后打开 package.json
调整脚本:
"scripts": {
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
保存关闭。
现在运行:
npm run dev
你就会看到 webpack dev server 在浏览器中加载你的应用了。
webpack dev server 非常适合用来开发。
聊聊webpack 4的更多相关文章
- 聊聊 webpack 打包如何压缩包文件大小
想必很多人都经历过做完一个项目后,再打包发现某些文件非常大,导致页面加载时很慢,这就很影响用户体验了,所以在我经历了一些打包后,讲讲如何有效地缩小包体积,加快页面的首屏渲染 动态 polyfill 相 ...
- Angular企业级开发(2)-搭建Angular开发环境
1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...
- webpack4配置详解之新手上路初探
前言 经常会有群友问起webpack.react.redux.甚至create-react-app配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少. 今天就尝试着一起来聊 ...
- webpack之前端性能优化(史上最全,不断更新中。。。)
最近在用webpack优化首屏加载性能,通过几种插件之后我们上线前后的速度快了一倍,在此就简单的分享下吧,先上个优化前后首屏渲染的对比图. 可以看到总下载时间从3800ms缩短到1600ms. 我们在 ...
- 前端常用技术概述--Less、typescript与webpack
前言:讲起前端,我们就不能不讲CSS与Javascript,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,css的扩展有Less.Sass.Stylus 等,js的超集有Typescript等. ...
- [转] webpack之前端性能优化(史上最全,不断更新中。。。)
最近在用webpack优化首屏加载性能,通过几种插件之后我们上线前后的速度快了一倍,在此就简单的分享下吧,先上个优化前后首屏渲染的对比图. 可以看到总下载时间从3800ms缩短到1600ms. 我们在 ...
- dependencies、devDependencies、webpack打包 的区别与联系
为什么要在dependencies.devDependencies中声明依赖? 答:保证任何人在(或者你自己在其他设备上)对这个项目进行修改(开发)时,通过npm install就能获取同样的开发环境 ...
- 什么是Less、typescript与webpack?
前端常用技术概述--Less.typescript与webpack 前言:讲起前端,我们就不能不讲CSS与Javascript,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,css的扩展有Les ...
- [转]聊聊技术选型 - Angular2 vs Vue2
转载:https://juejin.im/post/58cab85b44d9040069f38f7a "Come, and take choice of all my library, An ...
随机推荐
- Spring Cloud微服务安全实战_3-2_第一个API及注入攻击防护
1,本节主要讲了sql注入防范,如果使用mybatis,需要注意mapper.xml里面$会造成sql注入风险. 第一个 api 代码:https://github.com/lhy1234/sprin ...
- 6.使用Go向Consul注册的基本方法
编写注册函数 package utils import ( consulapi "github.com/hashicorp/consul/api" "log" ...
- postMessage的使用
一.简介 1.postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递 2.postMessage(data,origin)方法接受两个参数 ...
- 这次是真的换新blog了!
zlycerqan.xyz zlycerqan.xyz 好麻烦啊...不搞啦...溜辣溜辣 博客又不咕咕咕啦 .
- Redis有效时间设置及时间过期处理
本文对redis的过期处理机制做个简单的概述,让大家有个基本的认识. Redis中有个设置时间过期的功能,即对存储在redis数据库中的值可以设置一个过期时间.作为一个缓存数据库,这是非常实用的.如我 ...
- 我对网络IO的理解
Unix/Linux系统下IO主要分为磁盘IO,网络IO,我今天主要说一下对网络IO的理解,网络IO主要是socket套接字的读(read).写(write),socket在Linux系统被抽象为流( ...
- html 指定页面字符集的两种方式
1.html指定页面字符集的两种方式 方式一: <meta charset="utf-8"> 方式二: <meta http-equiv="Cont ...
- Asp.Net 服务器控件下使用Jquery.validate.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Maven 教程(17)— Maven Profile 和 Filtering 简介
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79774572 每个项目都会有多套运行环境(开发,测试,正式等等),不同的环境配置 ...
- Maven 教程(13)— Maven插件解析运行机制
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79551210 这里给大家详细说一下Maven的运行机制,让大家不仅知其然,更知其 ...