一、loader
1.less文件的处理
1.安装
npm install less-loader --save-dev less
2.配置
{
test: /\.less$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'less-loader'},
]
}
2.图片文件处理
1.安装
url-loader 和 file-loader
2.配置
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
option: {
//当加载的图片小于limit时,会将图片转化为data64型的字符串
//当加载的图片大于limit时,会使用file-loader进行加载,file-loader不需要配置,会在出口处生成一张新的图片来显示
limit: 13000,
name: '/img/[name].[hash:8].[ext]',//修改生成的文件在路径下的位置和名称
}
}
]
}
output : {//输出文件
filename : 'bundle.js',//输出文件名
path : __dirname + '/bind',//输出文件路径,__dirname表示这个js文件的路径
publicPath: 'dist/'//修改相关url的路径
},
2.vue的配置
1.安装
npm install vue --save
2.引用
import Vue from 'vue/dist/vue.esm.js'
3.el和template的关系
template和el同时存在时,template的内容会替换掉原来的el绑定的内容
4.封装vue文件
#安装vue的loader
npm install --save-dev vue-loader vue-template-compiler
#配置vue的loader
{
test: /\.vue$/,
use: ['vue-loader']
}
#创建vue文件,在vue文件中写入script ,template , css
#在main.js中引入vue文件
二、plugin(插件)
1.功能
对webpack的功能进行扩充
2.使用步骤
安装---配置
3.常用插件
BannerPlugin 为代码添加版权协议
HtmlWebpackPlugin 在目标文件夹生成html文件并将打包好的js文件插入
uglifyjs-webpack-plugin 压缩js代码
三、搭建本地服务器
webpack一脸懵逼先放着
四、配置文件的分离
webpack一脸懵逼先放着