webpack入门进阶（2）
1.4.webpack-dev-server
webpack-dev-server是我们在开发阶段需要用到的一个服务器,它会把代码打包到内存，我们可以通过http的方式访问到打包到内存的代码
安装
npm i webpack-dev-server@3.8.1 -D
修改package.json的启动命令
"dev": "webpack-dev-server --env.production --config ./build/webpack.base.js"
增加相关配置
webpack.dev.js
const path = require("path")
module.exports = {
mode: "development",
devServer: {
// 默认访问的根路径，webpack-dev-server会去这个路径下找到index.html文件并返回
contentBase: path.join(__dirname, "../dist"),
// 开启gzip压缩，增加文件返回速度
compress: true,
port: 8000,
// 启动后自动打开浏览器
open:true
}
}
1.5.自动创建html文件
在前面webpack-dev-server中，我们设置的启动访问路径是项目下的dist目录，我们需要在这个dist目录下手动去创建一个index.html文件，并且将打包后的js文件手动添加到index.html文件中，这个时候，我们通过浏览器访问才能看到效果,在开发中，能用工具做的事情我们尽量用工具帮我们完成，我们可以使用 html-webpack-plugin 这个插件来帮我们做这件事情，它的作用就是根据模版文件生成一个静态文件，然后自动将打包好的js插入到这个 html文件中
首先，安装这个插件
npm i html-webpack-plugin@3.2.0 -D
增加相关配置
const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = function(env) {
const isDev = env.development
const base = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
filename: "index.js",
path: path.resolve(__dirname, "../dist")
},
plugins: [
new htmlWebpackPlugin({
// 设置标题
title: "螺钉课堂",
// 设置模版路径
template: path.resolve(__dirname, "../public/index.html"),
// 设置打包的文件名
filename: "index.html",
// 最小输出配置
minify: {
// 折叠空格
collapseWhitespace: true
}
})
]
}
if (isDev) {
return merge(base, dev)
} else {
return merge(base, prod)
}
}
注意，如果要使用配置中的title，模版中需要使用这种方式来获取title值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
1.6.自动清除上次打包的文件
当我们执行打包操作，自动生成一个打包文件，如果前面有已经生成的文件，我们通常会手动去删除前一次已经生成的文件，以避免产生混乱，这个时候可以使用clean-webpack-plugin来帮我们完成这个操作
安装
npm i clean-webpack-plugin@3.0.0 -D
增加相关配置
const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = function(env) {
const isDev = env.development
const base = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
filename: "index.js",
path: path.resolve(__dirname, "../dist")
},
plugins: [
new htmlWebpackPlugin({
title: "螺钉课堂",
template: path.resolve(__dirname, "../public/index.html"),
filename: "index.html",
minify: {
collapseWhitespace: true
}
}),
// 每次打包之前，先清除dist目录下的文件
new CleanWebpackPlugin()
]
}
if (isDev) {
return merge(base, dev)
} else {
return merge(base, prod)
}
}
1.7.解析css文件
解析css文件需要两个loader，css-loader和style-loader，css-loader的作用就是解析css的语法，解析完成后传给style-loader， style-loader就会生成style标签，然后把这些css代码插入到html文件中，这样在html就会有样式了
npm i css-loader@3.2.0 style-loader@1.0.0 -D
配置文件中增加配置项目
const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = function(env) {
const isDev = env.development
const base = {
entry: path.resolve(__dirname, "../src/index.js"),
output: {
filename: "index.js",
path: path.resolve(__dirname, "../dist")
},
// 每个文件都称为模块，module就是用来配置解析各种文件模块的，module里面主要涉及到几个问题，1 哪些模块文件需要被转换？ 2 用什么loader去转？ 3 用什么规则去转？
module: {
rules: [
{
test: /\.css$/,
use: "style-loader"
},
{
test: /\.css$/,
use: "css-loader"
}
]
},
plugins: [
new htmlWebpackPlugin({
title: "螺钉课堂",
template: path.resolve(__dirname, "../public/index.html"),
filename: "index.html",
minify: {
collapseWhitespace: true
}
}),
// 每次打包之前，先清除dist目录下的文件
new CleanWebpackPlugin()
]
}
if (isDev) {
return merge(base, dev)
} else {
return merge(base, prod)
}
}
注意： loader的写法有三种： 1、字符串 2 数组 3、对象 前面我们使用的就是字符串的形式
实际上，在没有对loader进行参数配置的时候，多个loader 我们更倾向于第二种写法,给loader传一个数组
module: {
rules: [
{
test: /\.css$/,
use: ["css-loader", "style-loader"]
}
]
},
注意： css-loader和style-loader是需要注意使用顺序的，如果配置成字符串的形式，css-loader要放在下面，如果配置成数组的形式，css-loader要放在前面，顺序不正确会报错
螺钉课堂视频课程地址：http://edu.nodeing.com
webpack入门进阶（2）的更多相关文章
- webpack入门进阶（3）
1.11.预处理器文件处理 1.sass文件 sass这种css预处理器是以.scss结尾,需要用node-sass和sass-loader来处理 安装loader npm i node-sass s ...
- webpack入门进阶（1）
1.webpack应用实例 1.1.快速上手 初始化项目 mkdir webpack-demo cd webpack-demo npm init -y 安装webpack npm i webpack@ ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...
- Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- webpack入门和实战(一)：webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
随机推荐
- Chisel3 - bind - Wire, Reg, MemPort
https://mp.weixin.qq.com/s/AxYlRtAXjd55eoGX5l1W-A 模块(Module)从输入端口(input ports)接收输入,经过内部实现的转换逻辑,从输出 ...
- 跨域解决方案 - JSONP
目录 1. 定义 2. JSONP 解决跨域 3. 应用场景 4. 代码演示 1. 定义 在HTML 中, script 标签有两个个性质: script 标签可以不受同源策略的限制去访问服务器资源, ...
- js实现浏览器打印功能
最近接触到一个新需求,实现打印机打印小票的功能.打的一桌子小票(惭愧),不过也基本满足了业务上的需求,现在分享一下如何实现(好记性不如烂笔头) 先上代码 // 布局代码 <div id=&quo ...
- Source Insight无限试用期修改方法
修改路径:C:\ProgramData\Source Insight\4.0\si4.lic 字段: Date="2020-01-20" Expiration="2020 ...
- （七）DVWA之SQL Injection--SQLMap测试（Low）
目录结构 一.测试需求分析 二.SQLMap利用SQL注入漏洞,获取数据库信息 1.判断是否存在注入点 2.获取DBMS中所有的数据库名称 3.获取Web应用当前连接的数据库 4.列出数据库中的所有用 ...
- 使用Java将阿拉伯数字转换为中文数字（适配小数转换）
Java数字转换工具类 简介 该工具类可以将整数.小数.负数转换为中文的数字,如: 0 --> 零 1 --> 一 2.1 --> 二点一 -2.1 --> 负二点一 具体代码 ...
- 开发小白可以一年涨薪10w？这份java文档功不可没，学透你也可以
靠这份文档,跳槽涨薪10K 金九银十的时候我分享了一份面试文档给我的兄弟,没想到这哥们2个月之内斩获数个BAT的offer, 最后选择了一个他最想要去的公司,既然有这么好的效果,我就打算把这份文档分享 ...
- EAT表
0X0 EAT表 在windows系统中,"库"是为了方便其他程序调用而集中包含相关的函数的文件(dll,sys).win32 API是最具有代表性的库. EAT是一种核心机制,它 ...
- Python惯用法
目录 1. 不要使用可变类型作为参数的默认值 1. 不要使用可变类型作为参数的默认值 摘自<流畅的Python>8.4.1 class HauntedBus: ""&q ...
- DockerFile构建镜像和Docker仓库
利用commit理解镜像构成 注意: docker commit 命令除了学习之外,还有一些特殊的应用场合,比如被入侵后保存现 场等.但是,不要使用 docker commit 定制镜像,定制镜像应该 ...