webpack3.0+总结
2024-09-02 21:24:28
ul>li{
color:blue;
font-size:20px
}
.items>ul>li>ul>li{
color:crimson
}
-->
webpack直接打包
- 1.装生产环境
- 2.打包 webpack 入口文件路径 出口文件路径
webpack.config.js配置
- 1.出入口配置
- 1-1.直接控制台输入webpack就可以打包了
- 1-2.多入口文件配置
- 1-3.热更新安装
- 1-4.css-loader style-loader配置 三种写法
- 1-5.代码压缩插件 uglifyjs-webpack-plugin 次插件webpack内部集成 不需要安装 注意：此处不可以用dev启动，原始webpack压缩就可以了
- 1-6.此刻以生产环境启动服务器 分离的文件路径就ok了 对于website路径前缀可以更改
const path=require('path');
module.exports={
entry:'./src/index.js', //入口配置
output:{
path:path.resolve(__dirname,'dist'),//出口路径
filename:'index.js'//出口文件名
},//出口配置
// module:{},//图片字体视频等配置
// plugins:{},//插件
// devServer:{}//服务
}const path=require('path');
module.exports={
entry:{
entry1:'./src/index1.js',
entry2:'./src/index2.js'
}, //多入口配置
output:{
path:path.resolve(__dirname,'dist'),//出口路径
filename:'[name].js'//多出口 name表示和对应的入口文件入口属性名一样
}
}
html文件放入src的骚操作,html打包
- 1.安装并引入html-webpack-plugin
- 2.直接在终端运行webpack,html文件被打包到dist文件夹中
css引入图片打包 直接打包成js一部分
- 1.安装file-loader url-loader
- 2.配置
css分离
- 1.将打包好到js文件的css分离
- 2.下载包并引入 extract-text-webpack-plugin
- 3.修改css配置 但是这样分离的css路径是有问题的
- 4.设置出口文件的公共路径 http://localhost:8080
- 5.如果本地引用 设置公共路径为 path.resolve('dist')
img引入的图片打包
- 1.安装html-withimg-loader
- 2.配置
对于动画样式如何自动添加内核前缀
- 1.安装postcss-loader 和autoprefixer
- 2.新建文件postcss.config.js
- 3.配置
去除多余的css样式
- 1.安装purifycss-webpack purify-css
- 2.全局引入
- 3.配置plgins
es5转换为6的最新包
- 1.下载安装babel-preset-env
- 2.添加.babelrc配置
目录结构
webpack.config.js配置
const path=require('path');
const uglify=require('uglifyjs-webpack-plugin');
const htmlPlugin=require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');//同步检查html
const PurifyCSSPlugin = require("purifycss-webpack");//去除多余的css样式的插件
var website ={
publicPath:path.resolve('dist')
}
module.exports={
entry:{
entry1:'./src/index1.js',
entry2:'./src/index2.js'
}, //多入口配置
output:{
path:path.resolve(__dirname,'dist'),//出口路径
filename:'[name].js',//多出口 name表示和对应的入口文件入口属性名一样
publicPath:website.publicPath//公共路径
},
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'dist'),
//服务器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:8080
},
module:{
rules:[
{
test:/\.css$/,
//用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use: extractTextPlugin.extract({
fallback: "style-loader",
use:[ { loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader']
})//分离css文件配置
// use:['style-loader','css-loader','postcss-loader'],
//loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
//include/exclude:''手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
//query:'' 为loaders提供额外的设置选项（可选）。
}
/**
* rules:[{
* test:/\.css$/,
* loader:['style-loader','css-loader']
* 或者 use[{loader:"style-loader"},{loader:'css-loader'}]
* }]
*
*
*/,
{
test: /\.js$/,//js5转6
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}],
exclude: /node_modules/
},{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[{
loader:'url-loader',//小于500000b的url-loader转换，大于的交给file-loader
options:{//url内置了file 只需要引url-loader 大于的会自动交给file处理
limit:500000, //将小于500000b的文件打成base64的格式写入js
}
}]
},
{
test: /\.(htm|html)$/i,//img图片正确路径配置
use:[ 'html-withimg-loader']
}
]
},
plugins:[
new uglify(),
new extractTextPlugin("/css/index.css"),//css样式分离后的路径
new htmlPlugin({
minify:{
removeAttributeQuotes:true//是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
},
hash:true,//为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template:'./src/index.html'//是要打包的html模版路径和文件名称。
}),
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})//用于删减多余的css样式
]
}
常用的包
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0"
},
"devDependencies": {
"autoprefixer": "^7.1.6",//css添加内核前缀
"babel-core": "^6.26.0",//es5转换es6 方法1
"babel-loader": "^7.1.2",//es5转es6 方法1
"babel-preset-es2015": "^6.24.1",//es5转es6 方法1
"css-loader": "^0.28.7",//css样式解析
"extract-text-webpack-plugin": "^3.0.2",//css文件分离
"file-loader": "^1.1.5",//图片等文件解析
"html-webpack-plugin": "^2.30.1",//html自动被加载js 也就是html打包
"html-withimg-loader": "^0.1.16",//img图片路径打包
"postcss-loader": "^2.0.9",//为css添加内核前缀
"style-loader": "^0.19.0",//css样式解析
"url-loader": "^0.6.2",//图片等文件解析
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.5"//热更新模块
}
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
.babelrc.js
{
"presets": ["es2015"]
}
// {
// "presets":["react","env"]
// }//通过转换为env将es5转换为es6
最新文章
- 新一代Ajax API --fetch
- ajax绑定
- log4net 配置
- 分布式ID生成器 zz
- mfc
- HDU3586 Information Disturbing（树形DP）
- Codeforces Round #363 (Div. 2)->C. Vacations
- linux 命令——PS命令
- UBI(unsorted block image )块管理
- java 中有几种方法可以实现一个线程？ 用什么关键字修 饰同步方法? stop()和 suspend()方法为何不推荐使用？
- Spark大型项目实战：电商用户行为分析大数据平台
- viewpager循环滚动和自动轮播的问题
- java:合并两个排序的链表(递归+非递归)
- 阿里P9架构师讲解从单机至亿级流量大型网站系统架构的演进过程
- Salesforce小知识：累计汇总字段类型
- Android ListView之选中(撤销选中)Item
- 自己用过的web软件tools软件以及玩过的游戏
- [Alpha]Scrum Meeting#5
- php-fpm 信号
- (转)Centos7.2 给grub菜单做加密