loaders之 html处理
npm install --save-dev html-loader
module: {
loaders: [
{ test: /\.html$/,use: [{loader:'html-loader'}]},
]
}
Babel的配置选项
Babel其实可以完全在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，
因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，
分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项）
2.5.1官网最新文档总结：
1.安装方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev
2.所以后面的参数'由presets: ['latest']相对于的变成了presets: ['env']
3.官方并没有废弃query 也没有指明options是新参数 实际测试两种方法都可以 生成结果也一模一样
4.loader: 'babel-loader'才能被识别
5.include和exclude需要相对路径，所以include:__dirname +'./src/' 加前缀__dirname
var path=require('path');
var HtmlPlugin=require('html-webpack-plugin');
module.exports={
entry:{
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/[name]-[chunkhash].js'
},
module:{
loaders:[
{
test: /\.js$/,
loader: "babel-loader",
exclude: path.resolve(__dirname)+'./node_modules/', //排除哪个文件不转换
options:{"presets":['env']}, //"presets:['es2015']"
include:path.resolve(__dirname)+'./src' 只转换哪个文件
}
]
},
plugins:[
new HtmlPlugin({
filename:'index.html',
temlpcat:'layer.html',
inject:'body'
})
]
}
css-loaders自动添加前缀
1 npm install --save -dev autoprefixer postcss-loader
2、在webpack.config.js的目录下 创建一个postcss.config.js的文件//postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')({
broswers : ['last 5 versions']
})
]
};var path=require('path');
var path=require('path');
var HtmlPlugin=require('html-webpack-plugin');
var webpack=require('webpack');
module.exports={
entry:{
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/[name]-[chunkhash].js'
},
module:{
rules:[
{
test: /\.js$/,
loader: "babel-loader", //npm install --save-dev babel-loader babel-core
exclude: path.resolve(__dirname,'./node_modules/'),
options:{"presets":["es2015"]}, //npm install --save-dev babel-preset-env
include:path.resolve(__dirname)+'./src'
},
{
test:/\.css$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {importLoaders: 1 } //这里是处理@import引入进来的文件 如果是@import的是less文件，那么不用加
},
{
loader: 'postcss-loader' //
}
]
},
{
test:/\.less$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'},
{loader:'less-loader'},
{loader:'postcss-loader'} //自动补齐less文件里面的需要加浏览器前缀的
]
},
{
test:/\.html$/,
use:[
{loader:'html-loader'}
]
}
]
},
plugins:[
new HtmlPlugin({
filename:'index.html',
template:'layer.html',
inject:'body'
}),
new webpack.LoaderOptionsPlugin({ //浏览器加前缀 貌似可以不需要这段代码
options: {
postcss: [
require('autoprefixer')({
broswers: ['last 5 versions']
})
]
}
})
]
}
import
要禁用 css-loader 解析 @import，将选项设置为false
@import url('https://fonts.googleapis.com/css?family=Roboto');
处理less
npm install --save -dev less-loader less
{
test:/\.less$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'},
{loader:'less-loader'},
{loader:'postcss-loader'} //如果需要样式添加浏览器前缀
]
},
处理图片
npm install --save -dev file-loader
{
test:/\.(png|jpg|gif|svg)$/i,
use:[
{
loader:'file-loader?name=html-[hash:6]'
}
]
}
npm install --save -dev url-loader
{
test:/\.(png|jpg|gif|svg)$/i,
use:[
{
loader:'url-loader?name=html-[hash:6]?limit=40000'
}
]
}
url-loader实际上是file-loader上多加的一层封装。
多了一个limit参数。小于多少K的图片会以base64的形式内联在代码中，可以减少一次http请求。 但是如果图片复用性会很高，不建议，虽然会减少一次请求，但是文件会变大，因为是内联在代码内。
多一次请求，会存在浏览器缓存中，第二次用到这个图片会很快
压缩图片
npm install --save -dev image-webpack-loader
{
test:/\.(png|jpg|gif|svg)$/i,
use:[
{
loader:'url-loader?name=html-[hash:6]?limit=40000'
},
{
loader:'image-webpack-loader'
}
]
}
