webpack使用体验

node知识

path.resolve

path.resolve(from[...pathname], to)将参数to位置的字符解析到一个绝对路径里。
__dirname 当前文件目录绝对路径
__filename 当前文件全路径
demo示例:(当前目录: D:\www\programs\react-prod\config)

// 相对路径根据当前位置绝对路径解析
// ../匹配上一层
// ./ 或者 没有./匹配当前路径
// D:\www\programs\react-prod\config\dist
path.resolve('./dist')
// D:\www\programs\react-prod\dist
path.resolve('../dist')
// D:\www\programs\react-prod\config\www\dist
path.resolve('www/demo', '../dist')
// D:\dist绝对路径直接返回
path.resolve('/dist')

// 如果只传递一个参数，那么相对路径将基于当前命令的执行路径
输出

console.log(path.resolve('./dist'))
console.log(path.resolve(__dirname, './dist'))

当在D:\www\programs\react-prod路径下执行时，分别返回

D:\www\programs\react-prod\dist
D:\www\programs\react-prod\script\dist

当在D:\www\programs\react-prod\script路径下执行时，分别返回

D:\\www\\programs\\react-prod\\script\\dist
D:\\www\\programs\\react-prod\\script\\dist

所以为了表现一致，path里面解析绝对路径，需要加上__dirname

---

webpack知识

context
配置基础目录，使config中的相对路径基于这个目录,这样，不管webpack配置文件放在哪里，我们在文件内部引用外部文件时，都可以根据一个相同的基础目录解析文件，只需修改config.context一个地方就可以了。

entry入口

用法：

1. 单入口: entry: string|Array,传入数组会将数组中的文件作为统一一个入口一起打包成一个文件
2. 多入口: 用法：entry: {[entryChunkName: string]: string|Array}根据入口打包成多个js文件

output输出

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

1. filename 用于输出文件的文件名。
2. 目标输出目录 path 的绝对路径。

常用loaders

1.css-loader

css加载器 css-loader, style-loader
css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们
style-loader用来将解析出来的css内容添加到页面的style标签里面。但是一般情况下我们都会将css样式与js文件分离，这样可以有效减小代码体积。2.66kb -> 816bytes+27bytes
css-loader+style-loader一般需要结合两个plugin一起使用，分别用于将css分离和压缩

// 用于提取css的plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 用于压缩css的plugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
...
// module.rules[num]
{
    test: /\.css$/,
    // 它会将所有的入口chunk(entry chunks)中引用的 *.css，
    // 移动到独立分离的 CSS 文件
    // css bundle 与 js bundle 并行加载,加快页面初始化
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader'
    })
    // style-loader用来将css-loader解析(import,url()等)出来的css
    // 插入到页面的