欢迎加入qq群(IT-程序猿-技术交流群):757345416
webpack简介:
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
webpack是一个模块加载器及打包工具
webpack配置项:
在项目根目录新建webpack.config.js文件:
//引入->path模块,路径使用
const path=require('path');
//引入->将模板文件拷贝到打包目录,并自动引入script标签
const HtmlWebpackPlugin=require("html-webpack-plugin");
//引入->打包前将原打包文件删除
const CleanWebpackPlugin=require("clean-webpack-plugin");
//引入->压缩打包后的文件
const UglifyJSPlugin=require("uglifyjs-webpack-plugin");
//配置文件是一个{}
module.exports={
//入口文件配置
entry:"./src/js/index.js",
//打包目录&文件名
output:{
path:path.resolve(__dirname,"build"),
//HtmlWebpackPlugin自动引入的script标签与此相同
filename:"js/bundle.js"
},
//插件配置
plugins:[
//实例化HtmlWebpackPlugin
new HtmlWebpackPlugin({
//打包后的模板文件名
filename:"index.html",
//模板文件路径
template:"./src/index.html"
}),
//打包时要清除的原打包文件夹
new CleanWebpackPlugin(['build']),
//压缩打包后的文件
new UglifyJSPlugin()
],
//loader配置
module:{
loaders:[
//css
{
test:/\.css$/,
loader:"style-loader!css-loader"
},
//图片
{
test:/\.(jpg|png|gif)$/,
loader:"url-loader",
options:{
//限制小于10000字节的进行base64转码,如文件大于限制的字节,则与file-lodaer等价
limit:10000,
//打包后制定目录为"img/原文件名_hash值.原文件扩展名"
name:"img/[name]_[hash].[ext]"
}
},
//字体图标
{
test:/\.(eot|svg|ttf|woff|woff2)$/,
loader:"file-loader"
},
//react
{
//要编译的文件
test:/\.jsx?$/,
//装载的模块
loader:"babel-loader",
//忽略编译的文件夹
exclude:/node_modules/,
//具体的编译类型
query:{
//不压缩
compact:false,
//要编译的是react
presets:["react"]
}
}
]
},
//自动检索扩展名,此扩展名可省略
resolve:{
extensions:[
".jsx",
".less",
".js",
".css"
]
}
}
文章到此结束,希望对你的学习有帮助!