简单记录一下webpack学习过程中需要注意的点
先背一遍基本概念:
- entry:webpack构造的起点,可以是单个也可以是多个入口,甚至动态配置
- output:接受一个对象,控制webpack如何向硬盘写入编译文件
- loader:定义非js文件的处理方式
- plugins:丰富webpack的功能
webpack处理css文件
webpack最基本的css处理:css-loader + style-loader。其中css-loader用于处理css文件中的@import
和url(...)
,而style-loader用于将css-loader的输出生成js中的函数调用将css动态添加到html文件中
目录结构如下
在main.js中引入css
import base from './src/css/base.css'import common from './src/css/common.css'复制代码
webpack.config.js中配置
{
test:/\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: {//编译后应该使用什么插件来处理css文件
loader: 'style-loader'
},
use:[
{//用什么插件来编译css文件
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins:[
require('autoprefixer')({
browsers:['last 5 versions']
})
]
}
}
]
}),
exclude:/node_modules/
},
plugins:[ new ExtractTextWebpackPlugin({ filename:'css/[name].min.css' }),
]
复制代码
具体配置我们不谈,我们讲讲注意点,
首先我们的loader的加载顺序是不能随意改动的,webpack加载loader是从下到上,也就是先从post-loader->css-loader-->style-loader,
除了css-loader + style-loader还用到了extract-text-webpack-plugin和postcss-loader,首先extract-text-webpack-plugin的作用是将css文件单独打包出来,如果没有这个插件,我们的css将会和js文件打包到一起,postcss-loader这里我们我们结合Autoprefixer来使用,作用是可以为css属性添加浏览器前缀。
webpack处理图片
这里用到的loader有url-loader和file-loader
{
test:/\.(png|jpg|jpeg|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:'15000',
name:'img/[hash:8].[ext]',
publicPath:'../'
}
}
]
}
复制代码
这里需要注意的点我注意到的有一点,如果我们将项目中的图片单独放在一个文件夹下,publicPath也需要单独配置,否则图片的地址将会错误,我们的 output 中也有一个相同的参数publicPath,当我们单独配置了url-loader下的publicPath时,output中的publicPath将会被覆盖,在实际项目中我们可以配置对应的图片域名,如下:
当我们需要将vue-cli生成的项目部署到服务器时,需要将assetsPublicPath路径修改为./也是一样的道理。
使用html-webpack-plugin生成静态文件
new HtmlWebpackPlugin({
title: "处理静态资源",
hash:true,
template: './index.html',
}),
复制代码
这里我纠结过js文件和css文件引入的问题,生成的html文件是按照什么路径规则引入依赖的,通过几次实验,我得出来的结果是这样的:引入的路径是由output中的publicPath和filename共同决定的(有点智障的我。。)。
遇到的问题总结起来很简单,但是自己真正去写一套配置的时候总是会遇到各种问题,然后感觉到无从解决,只有自己写过一遍才能说自己懂一点webpack,哈哈哈(代码地址)