webpack常用配置

　　就我个人而言，之前也没有学过webpack，也没有单独用过webpack，只是在使用vue-cli时顺带使用了一下webpack，可事实上，彼时，我甚至可以根本不用关心他究竟是不是webpack，我只需要按照vue-cli一步步的操作下去即可，有时候，也会遇到各种各样的问题，可能为了一个很小的问题能够耽搁好半天。所以，下定决心来了解一下webpack了。

　　其实，关注点也没有那么多，不考虑模板的话，大多数的前端关注的焦点可能都在js、css、image这三部分。

　　直接看一份配置文件

const path = require('path');

// 利用extract-text-webpack-plugin插件，提取为单独的css文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
entry: {
index: './src/js/app.js'
},

output: {
path: path.resolve(__dirname, "./dist"),
filename: 'js/[name].js',
publicPath: path.resolve(__dirname, "./dist")
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
sourceMap: true,
minimize: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
},
{
test: /\.(png|jpg|gif)$/i,
loader: "url-loader",
options: {
limit: 1024,
name: "[name].[ext]",
outputPath: '/images/'
}

}
]
},
plugins: [
new ExtractTextPlugin({
filename: "css/[name]-app.css"
})
]
}

　　我们将目光聚焦在module.exports这个对象内部的各属性。

　　entry入口文件，简单来说就是webpack编译从哪里开始，有三种配置方式，1、字符串：直接以当前配置文件webpack.config.js为起始位置，输入相应的入口js；2、数组：如果存在多个入口的话，即多个入口js，则以数组形式表示；3、对象：前面不管是字符串方式还是数组方式，输出的都是一个js文件，而对象的表示方式就是添加模块名称，也就是Chunk Names，可以生成多个输出的js。

　　数组输入：

entry: ['./src/js/app.js', './src/js/index.js']

　　对象输入：

entry: {
app: './src/js/app.js',
index: './src/js/a.js'
}

　　相对应的输出文件的配置

output: {
path: path.resolve(__dirname, "./dist"),
filename: 'js/[name].js',
publicPath: path.resolve(__dirname, "./dist")
},

　　如果需要保存在同一个js文件夹下面，则filename的值需要加上文件夹名称，例如这里的是js，如果需要打包成多个js文件，则需要使用[name]占位，而如果需要打包成同一个js文件，则这里可以写成"js/bundle.js"。

　　关于path，在webpack3版本里面不知道是不是强制要求必须配置绝对路径了，我的配置如果不加绝对路径的话，打包总是报错，提示需要一个absolute path。关于js配置基本上完成了。还有一点需要配置的是，如果采用ES6语法写的JavaScript，我们还需要配置一个babel，这就涉及到各个loader的配置了，需要在module.rules这个数组里面一个一个的loader。

{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
"presets": ["env"]
}
}

　　关于babel配置，将ES6语法转成常规JavaScript的话，需要 "presets": ["env"]，这里有三种配置方法，可参见babel官网，但是推荐当前这种写法，看起来比较整洁。

　　关于css留在最后，先说图片相关的配置

　　通常情况下，有3个loader可以配置图片，file-loader、url-loader、image-webpack-loader，简单说file-loader就是解决图片问题的，url-loader是可以在file-loader的基础上加上限制，小于多少字节的图片可以转化为base64编码，image-webpack-loader相当于在保证图片一定质量的情况下，对图片进行压缩，对于我来说，我常用https://tinypng.com/压缩图片，所以需求上并不是很迫切。

所以多数情况下，我会选择url-loader

{
test: /\.(png|jpg|gif)$/i,
loader: "url-loader",
options: {
limit: 1024,
name: "[name].[ext]",
outputPath: '/images/'
}
}    　　

　　图片格式一般还需要有svg，甚至包括一些图标字体化的ogg、woff等字体图标都是通过url-loader来处理的。

　　limit是确定需要在多少字节以内的图片转为base64，[name]是图片名称的占位符，[ext]是图片格式。outputPath是将图片打包到同一个文件夹下面，如果不想写这个属性，又想达到相同效果的话，还可以将name属性值配置为"/images/[name].[ext]"。

　　如此配置的话，对于简单需求，基本上够用了。

　　关于css-loader，如果再涉及到sass、less、postcss，那就更多了，我个人只会使用sass，所以以sass为例，一般需要配置多个loader，style-loader、css-loader、sass-loader必不可少，sass-loader还需要配合node-sass。

　　如果单纯的只想把css文件打包到js文件中的话

{
test: /\.scss/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: true,
minimize: true,
},
},
"sass-loader"
]
}

　　多个loader处理css的话，依照从右向左，或者下到上排列处理顺序，先sass-loader，然后css-loader，然后style-loader，importLoaders是指还需要后面几个loader处理该文件，minimize表示是否压缩css， sourcemap，不解释。

　　然而，你如果想将打包的所有css文件抽取出来成为一个独立的css文件，那还需要一个plugin插件“extract-text-webpack-plugin”，

const ExtractTextPlugin = require('extract-text-webpack-plugin')

　　

{
test: /\.scss/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
sourceMap: true,
minimize: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true
　　　　}
　　}
　　　　]
})
}

　　与module平级的plugin

plugins: [
new ExtractTextPlugin({
filename: "css/[name].css"
})
]

　就会在dist目录下生成css文件夹，以及对应的css　

　　

　　

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff }
span.s1 { }