我的生涯一片无悔，想起那天下午夕阳下的奔跑，那是我逝去的青春，webpack跟着文档攒经验

摘要：，自然是不行的。真正有用的信息总是被垃圾信息掩盖，不过费了九牛二虎之力，还是找到了行之有效的解决办法，传送门。根据本例的路径，返回到层，再返回到层最终解析的路径就是。，至此，的路径都是正常的啦。

node知识

path.resolve

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

// 相对路径根据当前位置绝对路径解析
// ../匹配上一层
// ./ 或者 没有./匹配当前路径
// D:wwwprograms
eact-prodconfigdist
path.resolve("./dist")
// D:wwwprograms
eact-proddist
path.resolve("../dist")
// D:wwwprograms
eact-prodconfigwwwdist
path.resolve("www/demo", "../dist")
// D:dist绝对路径直接返回
path.resolve("/dist")

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

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

当在D:wwwprograms eact-prod路径下执行时，分别返回

D:wwwprograms
eact-proddist
D:wwwprograms
eact-prodscriptdist

当在D:wwwprograms eact-prodscript路径下执行时，分别返回

D:wwwprograms
eact-prodscriptdist
D:wwwprograms
eact-prodscriptdist

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

webpack知识

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

entry入口

用法：

单入口: entry: string|Array,传入数组会将数组中的文件作为统一一个入口一起打包成一个文件

多入口: 用法：entry: {[entryChunkName: string]: string|Array}根据入口打包成多个js文件

output输出

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

filename 用于输出文件的文件名。

目标输出目录 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
    // 插入到页面的