Webpack相关内容

Webpack

6.loaders配置：

1.vue-loader(vue-loader vue-template-compiler)
yarn add vue-loader vue-template-compiler -D
配置vue-loader规则
module:{
rules:[
{test:/.vue$/,use:"vue-loader"}
//处理.vue文件的loader
]
}
在webpack.config.js文件中配置vue-loader插件
const { VueLoaderPlugin } = require("vue-loader")
module.exports = {
...
plugins:[
...
new VueLoaderPlugin()
],
...
}
2.babel-loader(ES6 ==> ES5,react) (babel-loader@7 babel-core babel-preset-es2015)
3.css-loader,style-loader(将css文件当成模块处理)
4.sass-loader(scss编译生成css文件)(安装node-sass)
5.file-loader,url-loader(文件copy到目标文件夹)
(url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，
而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数)
6.post-css(处理css兼容)(postcss-loader autoprefixer postcss)

7.webpack.config.js配置文件参考：

module.exports = {
entry:{
index:__dirname + "/src/index.js"
},
output:{
path:__dirname + "/dist", //打包后的文件存放的地方
filename:"[name].bundle.js", //打包后输出文件的文件名
publicPath:"/dist/" //webpack output is servde from
},
devServer:{
contenBase:"./", // content not from webpack is serverd
port:"8000",
inline:true //实时刷新
},
devtool:"source-map",
module:{
roules:[
{
test:/.css$/,
loader:"style-loader!css-loader"
//添加对样式表的处理，内联样式
//loader:"style-loader!css-loader!postcss-loader"
},
{
test:/.js$/,
exclude:/node_modules/, //排除一个
//exclude:/(node_modules|src)/, //排除多个
loader:"babel-loader",
query:{
presets:['es2015']
}
},
//npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
//npm install --save-dev node-sass
{
test:/.scss$/,
loader:"style-loader!css-loader!sass-loader"
//loader:"style-loader!css-loader!postcss-loader!sass-loader"
},
{
test:/.(png|jpg|gif|svg)$/,
loader:"file-loader",
options:{
name:"img/[name].[ext]"
}
//a.将代码中依赖的图片资源复制到目标文件夹img/文件夹下面
//b.自动更新静态url地址(根据publicPath)
}
]
}
}
//postcss.config.js配置文件
module.exports = {
plugins:[
//require("autoprefixer")("last 100 versions")
require("autoprefixer")(
{
browsers:[
"last 10 Chrome versions",
"last 5 Firefox versions",
"Safari >= 6",
"ie > 8",
"iOS >= 8",
"Android >= 4.4"
]
}
)
]
}

声明：
纯属个人总结，有错误欢迎大家指出，互相学习，谢谢。

最后

以上就是端庄手套为你收集整理的Webpack相关内容的全部内容，希望文章能够帮你解决Webpack相关内容所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。