webpack配置:css文件打包、JS压缩打包和HTML文件发布
一、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:
}// 配置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文件
webpack配置:css文件打包、JS压缩打包和HTML文件发布的更多相关文章
- r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...
- r.js压缩打包
AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...
- webpack 3.X学习之JS压缩与打包HTML文件
js压缩 webpack自带一个插件uglifyjs-webpack-plugin来压缩js,所以不需要再次安装,当一切都准备妥当,引入uglifyjs-webpack-plugin模块: const ...
- mvc BundleConfig实现对Css、Js压缩打包加载
Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下: nuget包管理--程序包管理控制台--Install-Package Microsoft.AspN ...
- webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)
1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...
- webpack配置:增加babel支持、打包后调试
一.babel支持 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包 ...
- Webpack, 现在最流行的模块打包工具.压缩打包
压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...
- webpack配置css浏览器前缀
webpack打包时,css自动添加浏览器前缀.我们需要用到一个Loader:postcss-loader,和一个插件:autoprefixer 安装 npm i postcss-loader aut ...
- webpack配置css相关loader注意先后顺序
一.问题描述 在webpack3中,引入animate.css失败. 二.问题分析 1.难道是入口main.js引用方式不对? import animate from 'animate.css' 2. ...
随机推荐
- go开发
我开发中一直用这一段 //for debuggingfunc printPretty(v interface{}, mark string) (err error) { fmt.Printf(&quo ...
- SPOJ - AMR11H
Array Diversity Time Limit: 404MS Memory Limit: 1572864KB 64bit IO Format: %lld & %llu Submi ...
- 【LeetCode】Reverse digits of an integer
Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 Have you ...
- [BZOJ2631]tree 动态树lct
2631: tree Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 5171 Solved: 1754[Submit][Status][Discus ...
- scrapy 工作流程
Scrapy的整个数据处理流程由Scrapy引擎进行控制,其主要的运行方式为: 引擎打开一个域名,蜘蛛处理这个域名,然后获取第一个待爬取的URL. 引擎从蜘蛛那获取第一个需要爬取的URL,然后作为请求 ...
- css-demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- gcc与gdb的使用
1.gcc/g++编译过程: gcc/g++的编译格式: gcc [option][filename]... g++ [option][filename]... 1)processing:预处理过程, ...
- Trie树&kmp&AC自动机&后缀数组&Manacher
Trie 计数+Trie,读清题意很重要 https://vjudge.net/problem/UVALive-5913 kmp AC自动机 模板:https://vjudge.net/problem ...
- 【枚举约数】HackerRank - Week of Code 26 - Satisfactory Pairs
题意:给你一个正整数n,问你存在多少个正整数对a,b(a<b),满足条件:存在正整数x,y,使得ax+by=n. 就预处理出n以内所有数的约数,然后暴力枚举a,暴力枚举x,然后枚举n-ax的所有 ...
- [CF735E/736C]Ostap and Tree
题目大意: 一个$n(n\le100)$个点的树,将一些点染成黑点,求满足每个点到最近黑点的距离$\le k(k\le\min(20,n-1))$的方案数. 思路: 树形DP. 用$f[i][j]$表 ...