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).图片等都 ...
随机推荐
- 使用setTimeout()代替setInterval()
背景: 在JavaScript中,有两种定时器:setTimeout()和setInterval():setTimeout()只执行一次定时操作,setInterval()执行无限次定时操作:但是大多 ...
- Java实现 蓝桥杯 算法训练 求和求平均值
试题 算法训练 求和求平均值 问题描述 从键盘输入10个浮点数,求出它们的和以及平均值,要求用函数实现 输入格式 测试数据的输入一定会满足的格式. 1 10 (1行10列的向量) 输出格式 要求用户的 ...
- （Java实现） 洛谷 P1319 压缩技术
题目描述 设某汉字由N X N的0和1的点阵图案组成,如下图.我们依照以下规则生成压缩码.连续一组数值:从汉字点阵图案的第一行第一个符号开始计算,按书写顺序从左到右,由上至下.第一个数表示连续有几个0 ...
- Java实现 LeetCode 488 祖玛游戏
488. 祖玛游戏 回忆一下祖玛游戏.现在桌上有一串球,颜色有红色,黄色(Y),蓝色(B),绿色(G),还有白色(W). 现在你手里也有几个球. 每一次,你可以从手里的球选一个,然后把这个球插入到一串 ...
- Java实现 LeetCode 473 火柴拼正方形
473. 火柴拼正方形 还记得童话<卖火柴的小女孩>吗?现在,你知道小女孩有多少根火柴,请找出一种能使用所有火柴拼成一个正方形的方法.不能折断火柴,可以把火柴连接起来,并且每根火柴都要用到 ...
- java实现生日相同概率
假设所有年份都只有365天,求n个人中,出现生日相同的概率. 输入n 输出相同的概率(保留3位有效数字即可) import java.util.*; public class X { // n个人出现 ...
- Oracle RMAN各类压缩算法对比测试
1.背景概述 2.本次测试环境基本信息 3.测试步骤 3.1. 使用BCO进行压缩备份 3.2. 不使用压缩备份 3.3. 使用ACO中LOW级别进行压缩备份 3.4. 使用ACO中MEDIUM级别进 ...
- TypeScript使用体会（一）
typescript使用体会 近期接手了一个公司项目是由TS写的,第一次用在这里做一下简单的使用体会 个人觉得TS与JS相差不多,只是多了一些约束(可能自己还没体会到精髓) typescript是Ja ...
- qt程序添加文件版本号
1.需要一个 *.rc 文件,用以保存相关信息.比如添加一个 app.rc 里面内容如下所示: IDI_ICON1 ICON DISCARDABLE "app.ico" ----- ...
- python数据预处理
缺失值处理 import pandas as pda import numpy as npy import matplotlib.pylab as pyl # data=pda.read_excel( ...