Webpack开发指南
前言
成为一个全栈工程师，前端是必不可少的，这位前端构建工具webpack是一门必修的技术。
在学习webpack之前，先熟悉一下npm工具：https://www.runoob.com/nodejs/nodejs-npm.html
什么是webpack？
webpack可以打包所有的样式，脚本，表，资源，生成一个或多个bundle，webpack 能够处理 JS 文件的互相依赖关系，能够处理JS的兼容问题，把高级的、浏览器不是别的语法，转为低级的浏览器能正常识别的语法。
官方文档：https://www.webpackjs.com/concepts/
example参考：https://github.com/lemonzoey/webpack-demo
Hello Word
1 初始化项目 npm init ， 创建src,dist目录，在src下建立main.js,index.html
2 安装依赖包jquery ： npm install jquery
3 安装webpack ： npm install --save-dev webpack
mkdir webpack-study && cd webpack-study
npm init -y
npm install webpack webpack-cli --save-dev
4 编写项目
main.js是项目的JS入口文件
// 这是 main.js 是我们项目的JS入口文件 // 1. 导入 Jquery
// import *** from *** 是ES6中导入模块的方式
// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from jquery
// const $ = require('jquery') $(function () {
$('li:odd').css('backgroundColor', 'yellow')
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
})
})
index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 因为 main 中的代码，涉及到了ES6的新语法，但是浏览器不识别 -->
<!-- <script src="./main.js"></script> -->
<!-- 通过 webpack 这么一个前端构建工具， 把 main.js 做了一下处理，生成了一个 bundle.js 的文件 -->
<script src="../dist/bundle.js"></script>
</head> <body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body> </html>
5 webpack编译打包main.js
webpack src/main.js --output dist/bundle.js
或者可以在根目录下创建 webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js', //入口 表示要打包的文件
output: {
path: path.join(__dirname, './dist'),// 指定输出路径
filename: 'my-first-webpack.bundle.js'
}
};
再执行： webpack
当然执行命令可以交给npm管理，需要在package.json上添加
再执行命令 npm run build
资源管理
加载css样式
1 安装资源加载器
npm install --save-dev style-loader css-loader
2 添加样式文件
3 添加webpack配置文件css资源加载
const path = require('path');
module.exports = {
entry: './src/main.js', //入口 表示要打包的文件
output: {
path: path.join(__dirname, './dist'),// 指定输出路径
filename: 'bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
}
};
4 修改main.js 添加css文件，使得资源文件被加载到bundle.js中
其他加载图片，字体，数据等资源，相同的操作步骤，可参考官方文档.
输出管理
HtmlWebpackPlugin
如果index.html中引用了多个bundle文件，如果这些bundle文件名称发生改变，而index.html还引用原来的bundle文件名，则会出错。
这个plugin就是让指定的html每次build的时候生成一个新的html文件，该文件引用最新的bundle文件。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { // 存在多个入口文件
main: './src/main.js',
print: './src/print.js'
}, //入口 表示要打包的文件
output: { // 也输出多个bundle.js文件
path: path.join(__dirname, './dist'),// 指定输出路径
filename: '[name].bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'new Document' // title=new Document的html文件，会重新加载生成一个新的html
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
clean-webpack-plugin
清理/dist 文件夹
开发
1 如果某个js发生错误，希望能够定位到具体的js中，可以在webpack.config.js中添加如下选项
- webpack's Watch Mode(观察模式)，文件变更动态编译 在npm的scripts中添加 "watch": "webpack --watch"
- webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)
- webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)
webpack-dev-server使用
npm install --save-dev webpack-dev-server
webpack.config.js
devServer: {
contentBase: './dist'
}
package.json
"start": "webpack-dev-server --open"
执行命令 npm run start
模块热替换
该功能允许运行时更新各个模块，而不是全量刷新.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');
module.exports = {
entry: {
- app: './src/index.js',
- print: './src/print.js'
+ app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
+ hot: true
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
+ new webpack.NamedModulesPlugin(),
+ new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
"start": "webpack-dev-server --hotOnly"
tree shaking
如果所有代码都不包含副作用，那么可以删除一些未用到的export导出代码，
package.json
{
"name": "your-project",
"sideEffects": false
}如果有副作用，可以指定文件{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js",
"*.css"
]
}
生产环境构建
1 创建多个环境配置文件+|- webpack.common.js+ |- webpack.dev.js
+ |- webpack.prod.js2 安装
npm install --save-dev webpack-merge 用于合并多个配置文件 merge()
3 如开发配置
+ const merge = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+ devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist'
+ }
+ });4 npm script
代码分离
实际上编译出多个bundle代码，且公共部分提取到一个文件。避免重复模块引用到各个bundle中
动态导入
动态import模块，使得调用的时候编译出bundle文件。
缓存
实际上就是每一次文件bundle文件变更，能够变更文件名，使得客户端能够感知文件的变化。
只需要在webpack配置output的时候，文件名上添加hash段
output: {
- filename: 'bundle.js',
+ filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
提取模板manifest ...
new webpack.HashedModuleIdsPlugin() // 防止标识符moduleId的改变，导致无修改bundle刷新
// 用于生产环境
],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "vendor", // 生成共享模块bundle的名称
chunks: "initial",//”initial”, “async” 和 “all”. 分别对应优化时只选择初始的chunks，所需要的chunks 还是所有chunks 。
minChunks: 2 //共享模块的chunks的最小数目 ，默认值是1
}
}
}
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "manifest",
chunks: "initial",
minChunks: 2
}
}
}
},
使用环境变量
webpack --env.NODE_ENV=local --env.production --progress
在项目中构建路径值，publicPath 也会在服务器脚本用到，以确保文件资源能够在 http://localhost:8080 下正确访问
Webpack开发指南的更多相关文章
- webpack开发指南1
怎么安装Webpack 安装node.js 首先需要安装Node.js,node自带了包管理工具npm. 安装webpack 使用npm install webpack -g,webpack全局安装到 ...
- 现代前端库开发指南系列（二）：使用 webpack 构建一个库
前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- [转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...
- ASP.NET Aries 开源开发框架：开发指南（一）
前言: 上周开源了Aries开发框架后,好多朋友都Download了源码,在运行过程里,有一些共性的问题会问到. 所以本篇打算写一下简单的开发指南,照顾一下不是太看的懂源码的同学,同时也会讲解一下框架 ...
- FreeMarker模板开发指南知识点梳理
freemarker是什么? 有什么用? 怎么用? (问得好,这些都是我想知道的问题) freemarker是什么? FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生 ...
- Jetty使用教程（四：21-22）—Jetty开发指南
二十一.嵌入式开发 21.1 Jetty嵌入式开发HelloWorld 本章节将提供一些教程,通过Jetty API快速开发嵌入式代码 21.1.1 下载Jetty的jar包 Jetty目前已经把所有 ...
- JVM 平台上的各种语言的开发指南
JVM 平台上的各种语言的开发指南 为什么我们需要如此多的JVM语言? 在2013年你可以有50中JVM语言的选择来用于你的下一个项目.尽管你可以说出一大打的名字,你会准备为你的下一个项目选择一种新的 ...
- Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...
随机推荐
- [并发编程] -- 内存模型（针对JSR-133内存模型）篇
并发编程模型 1.两个关键问题 1)线程之间如何通信 共享内存程之间共享程序的公共状态,通过写-读内存中的公共状态进行隐式通信 消息传递程之间没有公共状态,线程之间必须通过发送消息来显式进行通信 2) ...
- 如何查看预收录在arXiv上论文的LaTeX源文件并编译
arXiv 是一个收集物理学.数学.计算机科学与生物学论文预印本的网站. 对于理科生来说,经常需要在上面搜索下载一些论文,正常情况下,一般人下载的只是 pdf 文件,其实可以在 arXiv 上下载编译 ...
- [转载]Android SDK 离线文档 (api 20)(升级至api 23)
原文地址:SDK 离线文档 (api 20)(升级至api 23)">Android SDK 离线文档 (api 20)(升级至api 23)作者:leechenhwa Android ...
- RecyclerView设置空视图
RecyclerView貌似不能直接设置空视图,所以可以自定义一个RecyclerView继承自RecyclerView并设置一个数据监听者监视数据状态. MyCyclerView.java pack ...
- Myeclipse-10.7.1版本破解
自从上次写了IDEA2020版本破解方式,这次写一下Myeclipse10.7.1版本破解 下方链接是IDEA破解教程 点击即可跳转 Myeclipse下载地址这里我上传到了百度网盘 这里提取码 ...
- Day02_IP地址详解&进制转换&DOS基本命令与批处理
学于千峰教育开源课程 感谢 千峰教育官网 b站在线视频 IP地址详解 一.简单局域网的构成 局域网:一般称为内网 简单局域网的构成:交换机.网线.PC(其他IT终端) 交换机:用来组建内网的局域网的设 ...
- PHP array_slice() 函数
实例 从数组的第二个元素开始取出,并返回直到数组末端的所有元素: <?php$a=array("red","green","blue" ...
- PHP highlight_string() 函数
实例 对字符串进行 PHP 语法高亮显示: <html><body><?phphighlight_string("Hello world! <?php p ...
- bzoj 4278 [ONTAK2015]Tasowanie
给出两个字符串 A B 让我们对其二路归并 求出能够归并出的最小字典序. 考虑后缀数组 不难发现我们将B直接连在A上会出现问题 问题是 A串剩下的和B串完全相同了 那么此时比大小就会用到B的部分 这是 ...
- luogu P6125 [JSOI2009]有趣的游戏
LINK:有趣的游戏 直接说做法了.首先是 我是不会告诉你我看完题后不太会 摸了2h鱼后看题解 一直翻发现自己题目有些没读完整.. 题目中说了每个字符串长度相同 而我一直在思考AC自动机可能存在一些节 ...