webpack config to use plugin and webpack-dev-server
Demo3操作手册
本Demo演示如何配合各种plugin进行偏复杂的使用
准备环境
初始化环境, cd到demo1目录之后, 执行如下命令:
npm init -y
npm install webpack webpack-cli -D
继续使用上一个level的目录机构以及环境:
npm install typescript ts-loader node-sass sass-loader css-loader style-loader -D
新建tsconfig.json, 内容如下:
{
"compilerOptions": {
"target": "es5"
}
}
L4 UglifyjsWebpackPlugin
顾名思义, 该插件是用来对js进行丑化处理, 使其难以阅读以提升代码的安全性, 安装该插件:
npm install uglifyjs-webpack-plugin -D
新建src目录并且新建如下三个文件:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack</title>
</head>
<body>
<button class="red" id="btn">HAHAHA</button>
</body>
</html>
// index.ts
import './index.scss';
class Demo2 {
Name: string;
constructor() {
this.Name = 'Demo2';
}
L2() {
console.log(`I'm demo for ts-loader, come from ${this.Name}`);
}
}
const demo = new Demo2();
const btn = document.querySelector('#btn');
btn.addEventListener('click', demo.L2);
// index.scss
$bgColor: bisque;
body {
background-color: $bgColor;
.red {
background-color: red;
}
}
新建webpack.config.js, 内容如下:
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
filename: 'output.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}, {
test: /\.scss$/,
use: [
{
loader: 'style-loader' //将JS字符串生成style节点
}, {
loader: 'css-loader' //将Css转换为CommonJs模块
}, {
loader: 'sass-loader' //将Sass编译成Css
}
]
}
]
},
plugins: [
new UglifyJsPlugin()
]
}
执行打包命令之后, 大功告成.
L5 HtmlWebpackPlugin
该插件用来给你创建HTML文件或者使用模版来添加相关节点的, 安装该插件:
npm install html-webpack-plugin -D
使用模板的用法
修改webpack.config.js如下:
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
filename: 'output.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}, {
test: /\.scss$/,
use: [
{
loader: 'style-loader' //将JS字符串生成style节点
}, {
loader: 'css-loader' //将Css转换为CommonJs模块
}, {
loader: 'sass-loader' //将Sass编译成Css
}
]
}
]
},
plugins: [
new UglifyJsPlugin(),
new HtmlwebpackPlugin({
template: './src/index.html'
})
]
}
创建文件的用法
将HtmlwebpackPlugin的参数修改如下:
// 原来
new HtmlwebpackPlugin({
template: './src/index.html'
})
// 更新
new HtmlwebpackPlugin({
title: 'Demo3-L5',
filename:'index.html'
})
执行打包命令之后, 大功告成.
L6
现在涉及到了html了, 我们要查看效果需要到编译输出的目录中双击打开来查看, 可以安装webpack-dev-server来实时查看, 安装:
npm install webpack-dev-server -D
修改package.json内容如下:
{
"name": "demo3",
"version": "1.0.0",
"description": "基础plugin的使用",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"ts-loader": "^6.2.1",
"typescript": "^3.6.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
}
}
接下来我们使用如下命令, 即可查看效果:
npm run dev
大功告成.
webpack config to use plugin and webpack-dev-server的更多相关文章
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- webpack之loader和plugin简介
webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...
- [转]webpack4.0.1安装问题和webpack.config.js的配置变化
本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...
- webpack的配置文件[webpack.config.js]
如果项目里没有webpack.config.js这个文件,webpack会使用它本身内置在源码里的配置项. webpack.config.js这个配置名称可以通过指令修改 npx webpack -- ...
- webpack构建原理和实现简单webpack
webpack打包原理分析 基础配置,webpack会读取配置 (找到入口模块) 如:读取webpack.config.js配置文件: const path = require("path& ...
- vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
默认,webpack无法打包.vue文件,需要安装 相关的loader: cnpm i vue-loader vue-template-compiler -D 提示以下错误信息: Module Err ...
- webpack.config.js
var webpack = require('webpack'); module.exports = { //插件项 plugins: [ new webpack.optimize.CommonsCh ...
随机推荐
- php 运算符的优先级
由上到下,依次递减,同行优先级相同. 结合方向 运算符 附加信息 无 clone new clone 和 new 左 [ array() 右 ** 算术运算符 右 ++ -- ~ (int) (flo ...
- Leetcode84. 柱状图中最大的矩形(单调栈)
84. 柱状图中最大的矩形 前置 单调栈 做法 连续区间组成的矩形,是看最短的那一块,求出每一块左边第一个小于其高度的位置,右边也同理,此块作为最短限制.需要两次单调栈 单调栈维护递增区间,每次不满足 ...
- 【多线程与并发】Java中的12个原子操作类
从JDK1.5开始,Java提供了java.util.concurrent.atomic包,该包中的原子操作类提供了一种使用简单.性能高效(使用CAS操作,无需加锁).线程安全地更新一个变量的方式. ...
- UE4虚幻引擎独立游戏制作教程 UE4编程教学 虚幻引擎4
非常好的一套UE4入门教学课程,语言诙谐幽默,并且是中文语音中文语音中文语音 赠送[精通Unreal引擎技术——关卡设计艺术]PDF版 目录 FLV格式,大小5G,中文语音 扫码时备注或说明中留下邮箱 ...
- laravel 通过ftp上传的时候报错 Use of undefined constant FTP_BINARY - assumed 'FTP_BINARY
用Laravel中的filesystems里面的ftp上传文件时报错.在windows上开发,文件上传的时候碰到上面的问题,搜了些资料,发现是php7的ftp拓展默认未开启. filesystems是 ...
- m.baidu.com/?tn=simple 开始有广告了。。。
m.baidu.com/?tn=simple 开始有广告了.... 极简的百度也被安排上了广告,..... 文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎留言.评论
- JavaWeb三大组件（Servlet、Filter、Listener）
JavaWeb三大组件指的是:Servlet.Filter.Listener,这三个组件在JavaWeb开发中分别提供不同的功能,然而很多人可能只用过其中一个或者两个(Servlet.Filter,比 ...
- linux命令实现音频格式转换和拼接
安装FFmpeg flaceric@ray:~$ sudo apt install FFmpeg flac 安装lame faaceric@ray:~$ sudo apt install lame f ...
- Docs-.NET-C#-指南-语言参考-预处理器指令：#region（C# 参考）
ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#region(C# 参考) 1.返回顶部 1. #region(C# 参考) 2015/07/20 利用 #region,可以 ...
- pytorch模型存储的两种方式
1.保存整个网络结构信息和模型参数信息: torch.save(model_object, './model.pth') 直接加载即可使用: model = torch.load('./model.p ...