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).图片等都 ...
随机推荐
- JQuery实现对html结点的操作（创建，添加，删除）
效果图: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- Java实现 LeetCode 53 最大子序和
53. 最大子序和 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 ...
- 【CSS】滚动条样式
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ .scrollbar::-webkit-scrollbar{ width: 16px; height: 16px; background-c ...
- 一篇关于Android M以后权限介绍的不错的文章
文章地址:http://www.jianshu.com/p/e1ab1a179fbb/
- Vim配合Shell自动上传ftp
shell代码: #!/bin/bash #网站配置 a1=('本地目录;主机;yonghuming;mima;远程目录' '本地目录;主机;user;pwd;远程目录') #选取的网站配置 web= ...
- 为什么要使用Mybatis-现有持久化技术的对比
1)JDBC SQL 夹在Java代码块里,耦合度高导致硬编码内伤 维护不易且实际开发需求中SQL有变化,频繁修改的情况很多 2)Hibernate 和 JPA 长难复杂SQL, 对于Hibernat ...
- Alink漫谈(七) : 如何划分训练数据集和测试数据集
Alink漫谈(七) : 如何划分训练数据集和测试数据集 目录 Alink漫谈(七) : 如何划分训练数据集和测试数据集 0x00 摘要 0x01 训练数据集和测试数据集 0x02 Alink示例代码 ...
- EIGRP-16-其他和高级的EIGRP特性-2-非等价负载分担
与大多数内部路由协议不同的是, EIGRP能够将流量负载分到多条非等价路径上,而不仅仅使用去往目的地最近距离的那一条路径.提供这项功能的特性称为非等价负载分担. 非等价负载分担的核心概念是可行后继 ...
- NativeXml实例训练时注意事项_1
NativeXml实例训练: 1)使用NativeXml操作xml文件时,需要将几个单元文件在Library中引用,配置好这个后面的就可自由训练.或按照自己想要的组合折腾. 2)运行程序调 ...
- 匿名实现类&匿名对象
学习过程中经常搞不清匿名类&匿名对象怎么用,今天就把常用的方式总结一遍. 1.创建了非匿名实现类的非匿名对象 //定义USB接口 interface USB{ void inputInofo( ...