webpack配置:css文件打包、JS压缩打包和HTML文件发布
2023-09-11 14:19:55 时间
一、CSS文件打包
1、在src下新建css文件,在css文件下新建index.css文件,输入以下代码
body{
color:red;
font-size:20px;
}
2、css建立好后,需要引入到入口文件,这里我们引入到index.js中
import css from './css/index.css';
document.write("It works.");
3、在终端安装style-loader和css-loader
4、安装好后,我们开始在webpack.config.js中配置module选项
//模块:例如解读CSS,图片如何转换,压缩
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
5、在终端输入 npm run server,可以看到出来的效果有了样式。
二、JS压缩打包
1、首先在webpack.config.js中引入
const uglify = require('uglifyjs-webpack-plugin');
2、然后在plugins里配置
//插件,用于生产模版和各项功能
plugins:[
new uglify()
],// 插件,多个插件,所以是数组
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports={
//入口文件的配置项
entry:{
entry:'./src/index.js'
},
//出口文件的配置项
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'bundle.js'
},
mode:"development",
//模块:例如解读CSS,图片如何转换,压缩
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
//插件,用于生产模版和各项功能
plugins:[
new uglify()
],// 插件,多个插件,所以是数组
//配置webpack开发服务功能
devServer:{
contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
host:'192.168.118.221',
compress:true,
port:8081
}// 配置webpack服务
}
3、在终端输入webpack,你会发现JS代码已经被压缩了
三、HTML文件发布
1、把dist中的index.html复制到src目录中,并去掉我们引入的js
2、在webpack.config.js中引入
const htmlPlugin = require('html-webpack-plugin');
3、引入后进行安装 npm install html-webpack-plugin --save-dev
4、在webpack.config.js中进行插件配置
plugins:[
new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
],// 插件,多个插件,所以是数组
5、在终端中输入webpack,进行打包,你会看到index.html文件已经被我们打包到dist文件目录下了,并且自动引入了js文件
相关文章
- js 生成4位随机数及Js知识汇总
- ace.js实现一个在线代码编辑器
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- Web前端-Vue.js必备框架(五)
- js中判断数组中是否包含某元素的方法
- Django使用本地css/js文件的基本流程
- JS:采摘自JS精粹
- js下载cos或者oos资源
- Vue工程化入口文件main.js中Vue.config.productionTip = false含义
- 聊聊JS动画库:Velocity.js
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- vue-cli3的vue.config.js文件配置,生成dist文件
- arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)
- js组件在线编辑器插件、图表库插件、文件树插件
- js中typeOf用法
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
- 理解JS里的偏函数与柯里化
- js实现textarea文字输入个数统计效果
- 【web前端(三十二)】javascript_外部js脚本文件
- JS框架设计之命名空间设计一种子模块
- 其它/编程 Node.js 初识2
- 【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)