简单记录一下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，哈哈哈（代码地址）
