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
大功告成.