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 ...
随机推荐
- git 导出远程特定分之
很多时候,git clone 只是 clone 下来了 master 分支,如果想 clone 特定分支.有的时候不知如何是好. 找到了如下的命令,记录一下.以便有需要的同学可以使用. git co ...
- 数据结构实验之查找二：平衡二叉树 (SDUT 3374)
#include <stdio.h> #include <string.h> #include <stdlib.h> struct node { int data; ...
- C++2.0新特性(五)——<Rvalue_reference和move语义>
一.Rvalue_reference(右值引用)和move语义 1.左右值概念区分 左值:表达式结束后依然存在的对象,我们也叫做变量: 右值:表达式结束后就不存在的临时对象. 2.判断左值和右值 能对 ...
- sql转码
select bzj, sqid, zcslh, qymc, ...
- meshing-网格加密
原视频下载:http://yunpan.cn/cujvm8VbAPJZi 访问密码 0d3b
- 深度学习面试题27：非对称卷积(Asymmetric Convolutions)
目录 产生背景 举例 参考资料 产生背景 之前在深度学习面试题16:小卷积核级联卷积VS大卷积核卷积中介绍过小卷积核的三个优势: ①整合了三个非线性激活层,代替单一非线性激活层,增加了判别能力. ②减 ...
- linux postgresql
- 宝塔 ssl https无法访问使用
https 使用的是443端口 请确保 云上的与宝塔上的443端口开放即可
- ES6深入浅出-13 Proxy 与 Reflect-2.Proxy 代理
阮一峰http://es6.ruanyifeng.com/#docs/proxy MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ...
- C#关于时间(获取特定格式的时间及多种方式获取当前时间戳)以及10位和13位时间戳转为特定格式
C#关于时间(获取特定格式的时间及多种方式获取当前时间戳)以及10位和13位时间戳转为特定格式 置顶 2018年03月06日 19:16:51 黎筱曦 阅读数:19098 标签: C#时间 更多 个人 ...