浅谈webpack构建工具配置和常用插件总结
webpack构建工具已经火了好几年，也是当下狠火狠方便的构建工具，我们没有理由不去学习。既然选择webpack就要跟着时代走，我们要追随大牛的步伐，大牛等等我。
一、webpack基础
- 在根目录使用npminit命令创建package.json，创建过程中一路回车。
- 本地安装webpack命令：npminstallwebpackwebpack-cli--save-dev安装成功后写入package.js的devDependencies中，可以通过npmnode_modules/.bin/webpack-v命令查看它的版本。
- 全局安装npminstall-gwebpack不推荐全局安装webpack。它会把你的项目锁定全局安装的版本，也可能导致不同的webpack版本中构建失败。
静态资源文件目录
- –src[项目源文件目录]
- –dist[打包文件目录]
- –webpack.config.js[webpack配置文件]
- –package.json[NPM包管理配置文件]
- –node_modules[项目中的依赖存放目录]
二、webpack.config.js
constwebpack=require('webpack');
module.exports={
mote:"development",//指当前的环境
/*
development：开发环境
production:生产环境
none:不做任何处理
*/
//入口文件，如果需求多个入口可改为对象
entry:'./src/index.js',
/*
hot配置是否启用模块的热替换功能，devServer的默认行为是在发现代码被改后通过自动刷新整个页面来做到事实预览，然后设置hot后，
会在不刷新整个页面的情况下用新模块替换老模块来做到实时更新。
如果选用hot：true方式来达到热更新的效果需要引用webpack.HotModuleReplacementPlugin插件配合达到你需要的效果，另外推荐一
种简便的方式在package.json中scripts设置如下
"scripts":{
"start":"webpack-dev-server--hot--inline",
},
*/
//服务器环境
devServer:{
hot:true,//建议使用第二种方案启动服务使用命令npmrunstart
port:"8080",//端口默认8080,可以自行设置
host:"192.168.xx.xx",
/*
host配置devServer服务监听的地址，也可以使用localhost进行访问浏览器输入192.168.xx.xx/index.html
简便方法在package.json中设置如下
"scripts":{
"start":"webpack-dev-server--hot--inline",
},
*/
},
//插件
plugins:[
//热加载插件
newwebpack.HotModuleReplacementPlugin(),
],
//输出
output:{
//filename：输出的文件名，可以自定义一些规则
filename:'[name].bundle.js',
//path，配置输出文件存放在本地的目录
path:path.resolve(__dirname,'dist')
}
};
三、插件
1、HtmlWebpackPlugin
constHtmlWebpackPlugin=require('html-webpack-plugin')
plugins:[
newHtmlWebpackPlugin({//打包输出HTML
title:'HelloWorld',//文件的标题
minify:{//minify的作用是对html文件进行压缩
removeComments:true,//移除HTML中的注释
collapseWhitespace:true,//删除空白符与换行符
minifyCSS:true,////是否压缩html里的css默认值false；
caseSensitive:true,//是否对大小写敏感，默认false
ollapseWhitespace:true,//是否去除空格，默认false
minifyJS:true,//是否压缩html里的js
removeAttributeQuotes:true,//是否移除属性的引号默认false
removeComments:true,//是否移除注释默认false
emoveCommentsFromCDATA:true,//从脚本和样式删除的注释默认false
emoveEmptyAttributes:true,//是否删除空属性，默认false
removeRedundantAttributes:true,//删除多余的属性
removeScriptTypeAttributes:true,//删除script的类型属性，在h5下面script的type默认值：text/javascript默认值false
},
filename:'index.html',//输出的html的文件名称
template:'index.html',//html模板在的文件路径
hash:true,//hash作用是给生成的js文件一个独特的hash值，默认值为false被构建过后的html引用js效果如下
//
}),
]
2、CleanWebpackPlugin
const{CleanWebpackPlugin}=require('clean-webpack-plugin');
plugins:[
//该插件主要用于自动删除webpack里dist目录中已不需要的文件
newCleanWebpackPlugin()
]
官方介绍：
Bydefault,thispluginwillremoveallfilesinsidewebpack'soutput.pathdirectory,aswellasallunusedwebpackassetsaftereverysuccessfulrebuild
3、ExtractTextWebpackPlugin
先把我们需要的东西下载好
npminstallwebpackcss-loaderstyle-loaderextract-text-webpack-plugin--save-dev
首先配置webpack，先不使用插件完成
module.exports={
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:"style-loader"},
{loader:"css-loader"}
]
}
]
}
}
配置好之后在js入口文件中引入样式文件，打包查看打包结果bundle.js，会发现css被打包到了js里面，以字符串的形式存在。如果index.html中已引入打包后的bundle.js，使用浏览器打开index.html文件会发现css以style的形式被插到了head当中。
2.使用插件
constpath=require('path');
constExtractTextPlugin=require("extract-text-webpack-plugin");
constHtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
}
/*
use:指需要什么样的loader去编译文件
fallback:编译后用什么loader来提取css文件
*/
]
},
plugins:[
newExtractTextPlugin("styles.css"),
newHtmlWebpackPlugin({//关于HtmlWebpackPlugin上文有提到
title:'extract-text-webpack-plugin',
filename:'index.html',
template:path.resolve(__dirname,'index.html'),
inject:'head'
})
]
}
以上内容配置好之后打包查看，可以发现css文件以link的方式被引在index.html的head中。期间配合HtmlWebpackPlugin插件自动插入index.html中
到此这篇关于浅谈webpack构建工具配置和常用插件总结的文章就介绍到这了,更多相关webpack构建工具配置和常用插件内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！