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 ...
随机推荐
- （2）React的开发
实例: import React from 'react'; class TodoList extends React.Component { constructor(props){ super(pr ...
- ROS里程计
gmapping导航建图包里建图需要里程计信息,且导航也需要. 整个移动机器人的控制结构如下图所示,其中base_controller节点将订阅的cmd_vel信息通过串口或其它通信接口发送给下位机( ...
- js中array.some()的用法
let array=[ { name:'jack', age:'19' }, { name:'rose', age:'19' } ] var box=array.some((value,index)= ...
- 搭建K8S集群
一.前言 我们将现有的虚拟机称之为Node1,用作主节点.为了减少工作量,在Node1安装Kubernetes后,我们利用VirtualBox的虚拟机复制功能,复制出两个完全一样的虚拟机作为工作节点. ...
- 【论文阅读】DCAN: Deep Contour-Aware Networks for Accurate Gland Segmentation
DCAN: Deep Contour-Aware Networks for Accurate Gland Segmentation 作者:Hao Chen Xiaojuan Qi Lequan Yu ...
- git工作总结
一.简单介绍 简介:Git是一个开源的分布式版本控制系统,可以有效.高速地处理项目版本管理. 发展史:CSV -> SVN -> Git 优点:Git速度快.开源.完全分布式管理系统 相关 ...
- CentOS安装相应版本的内核源码
昨天接到同事给安排的新任务,测试系统性能:网上查了些资料,目测perf功能很强大,而且是内核源码自带的,编译安装即可使用:看了下自己的虚拟机,没有内核源码,好吧,装一个: 查看一下系统版本: #cat ...
- 第10组 Alpha冲刺（3/6）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 对推送模块进行详细划分 基于用户的协同过滤,寻找更感兴趣的话题 学习API文档 ...
- mysql查看数据库表数量
1.查看数据库表数量SELECT count(TABLE_NAME) FROM information_schema.TABLES WHERE TABLE_SCHEMA='dbname'; selec ...
- CheatEngine查看PE header
先打开进程,炉石传说. 然后选择MemoryViewer 在MemoryViewer界面,Tools菜单,然后选择Dissect PE headers 然后查看mono.dll的信息 0x357A0是 ...