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 ...
随机推荐
- Pytest权威教程11-模块及测试文件中集成doctest测试
目录 模块及测试文件中集成doctest测试 编码 使用doctest选项 输出格式 pytest-specific 特性 返回: Pytest权威教程 模块及测试文件中集成doctest测试 编码 ...
- 模板 - 数学 - 多项式 - 快速数论变换/NTT
Huffman分治的NTT,常数一般.使用的时候把多项式的系数们放进vector里面,然后调用solve就可以得到它们的乘积.注意这里默认最大长度是1e6,可能需要改变. #include<bi ...
- Lombok：小辣椒的安装与使用
0.简介 Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具, 通过使用对应的注解,可以在编译源码的时候生成对应的方法,官网有详细的使用说明和视频. ...
- 01_tf和numpy的区别
import numpy as npimport tensorflow as tf # 这里是为了演示numpy和tf的区别.np.random.seed(43) x_data = np.random ...
- Flink 之 Data Sink
首先 Sink 的中文释义为: 下沉; 下陷; 沉没; 使下沉; 使沉没; 倒下; 坐下; 所以,对应 Data sink 意思有点把数据存储下来(落库)的意思: Source 数据源 ---- ...
- Apollo的基本使用及常见问题
1. 创建项目 在创建项目页面中填写相关项目信息,最后点击提交即可创建项目. 注意:应用Id必须唯一并且与客户配置的app.id一致. 2. 发布 进入对应项目可通过文本(批量)或者表格模式添加配置, ...
- java/spring boot/dubbo/spring cloud/微服务/SOA/分布式经典电子书籍pdf下载
微服务系列 官方文档是最好的资料了. spring cloud官方文档:https://cloud.spring.io/spring-cloud-static/Greenwich.RELEASE/si ...
- 004 API约定
在具体的学习前,我还是决定学一下,REST风格中在ES中的约定. 1.多重索引 先准备数据: 如果不小心,json里的值写错了,修改过来,重新执行即可. PUT index1/_doc/1 { &qu ...
- [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！
原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...
- Flutter之BLOC
flutter_bloc 是一个bloc第三方库,这个库很方便的让你集成bloc模式,这个库结合了RXDart,先了解一下bloc 的模式吧 1,widget 触发event 事件 2,bloc 接收 ...