摘要：，自然是不行的。真正有用的信息總是被垃圾信息掩蓋，不過費(fèi)了九牛二虎之力，還是找到了行之有效的解決辦法，傳送門。根據(jù)本例的路徑，返回到層，再返回到層最終解析的路徑就是。，至此，的路徑都是正常的啦。

node知識

path.resolve

path.resolve(from[...pathname], to)將參數(shù)to位置的字符解析到一個(gè)絕對路徑里。
__dirname 當(dāng)前文件目錄絕對路徑
__filename 當(dāng)前文件全路徑
demo示例:(當(dāng)前目錄: D:wwwprograms eact-prodconfig)

// 相對路徑根據(jù)當(dāng)前位置絕對路徑解析
// ../匹配上一層
// ./ 或者 沒有./匹配當(dāng)前路徑
// 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")

// 如果只傳遞一個(gè)參數(shù)，那么相對路徑將基于當(dāng)前命令的執(zhí)行路徑
輸出

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

當(dāng)在D:wwwprograms eact-prod路徑下執(zhí)行時(shí)，分別返回

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

當(dāng)在D:wwwprograms eact-prodscript路徑下執(zhí)行時(shí)，分別返回

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

所以為了表現(xiàn)一致，path里面解析絕對路徑，需要加上__dirname

webpack知識

context
配置基礎(chǔ)目錄，使config中的相對路徑基于這個(gè)目錄,這樣，不管webpack配置文件放在哪里，我們在文件內(nèi)部引用外部文件時(shí)，都可以根據(jù)一個(gè)相同的基礎(chǔ)目錄解析文件，只需修改config.context一個(gè)地方就可以了。

entry入口

用法：

單入口: entry: string|Array,傳入數(shù)組會將數(shù)組中的文件作為統(tǒng)一一個(gè)入口一起打包成一個(gè)文件

多入口: 用法：entry: {[entryChunkName: string]: string|Array}根據(jù)入口打包成多個(gè)js文件

output輸出

在 webpack 中配置 output 屬性的最低要求是，將它的值設(shè)置為一個(gè)對象，包括以下兩點(diǎn)：

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

目標(biāo)輸出目錄 path 的絕對路徑。

常用loaders

1.css-loader

css加載器 css-loader, style-loader
css-loader 解釋(interpret) @import 和 url() ，會 import/require() 后再解析(resolve)它們
style-loader用來將解析出來的css內(nèi)容添加到頁面的style標(biāo)簽里面。但是一般情況下我們都會將css樣式與js文件分離，這樣可以有效減小代碼體積。2.66kb -> 816bytes+27bytes
css-loader+style-loader一般需要結(jié)合兩個(gè)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，
    // 移動到獨(dú)立分離的 CSS 文件
    // css bundle 與 js bundle 并行加載,加快頁面初始化
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: "css-loader"
    })
    // style-loader用來將css-loader解析(import,url()等)出來的css
    // 插入到頁面的