摘要:之前在簡書上看到一個(gè)入門入門,看這篇就夠了,講得確實(shí)很清楚,但是因?yàn)椴┲饔玫氖堑陌姹荆同F(xiàn)在普遍默認(rèn)安裝的版本有一些細(xì)節(jié)上的差距,所以實(shí)際使用的時(shí)候就會(huì)遇到一些坑,對于想入門的小白如我,造成了不小的困擾。
之前在簡書上看到一個(gè)webpack入門(入門Webpack,看這篇就夠了),講得確實(shí)很清楚,但是因?yàn)椴┲饔玫氖?.x的版本,和現(xiàn)在普遍默認(rèn)安裝的2.x版本有一些細(xì)節(jié)上的差距,所以實(shí)際使用的時(shí)候就會(huì)遇到一些坑,對于想入門的小白如我,造成了不小的困擾。于是,干脆整理了一下我遇到的各種報(bào)錯(cuò),以備所需。
一 loaderwebpack 2.0之后,不能省略后綴-loader
二 postcss和autoprefixer配置最開始直接把postcss寫在module.exports的配置里,報(bào)錯(cuò)
//webpack配置文件 module.exports = { devtool: "eval-source-map", entry: __dirname + "/app/main.js", output: {...}, module: { loaders: [ { test: /.json$/, loader: "json" }, { test: /.js$/, exclude: /node_modules/, loader: "babel" }, { test: /.css$/, loader: "style-loader!css-loader?modules!postcss-loader" } ] }, postcss: [ require("autoprefixer")//調(diào)用autoprefixer插件 ], devServer: {...} }
因?yàn)閣ebpack 2.0之后,不允許用戶直接修改配置文件,需要把postcss寫入到plugins里面。報(bào)錯(cuò)信息如圖
于是將postcss部分更改為
plugins:[ new webpack.LoaderOptionsPlugin({ options:{ postcss: [ require("autoprefixer")//調(diào)用autoprefixer插件 ], } }) ]
這時(shí)問題又來了,報(bào)錯(cuò),提示語法錯(cuò)誤,webpack沒有被定義
要解決這個(gè)問題,需要在整個(gè)webpack.config.js配置文件頭部定義webpack
var webpack = require("webpack");
最終的配置文件如下,此時(shí)可以正常運(yùn)行webpack,看到css中被自動(dòng)根據(jù)瀏覽器添加了前綴,autoprefixer調(diào)用成功
//webpack配置文件 var webpack = require("webpack"); module.exports = { /*devtool: "eval-source-map",*/ entry: __dirname + "/app/main.js", output:{ path: __dirname + "/public", filename: "bundle.js" }, module:{ loaders:[ { test: /.json$/, loader: "json-loader" }, { test: /.js$/, exclude: /node_modules/, loader:"babel-loader" }, { test: /.css$/, loader:"style-loader!css-loader?modules!postcss-loader"http://增加modules之后,就會(huì)把css的類名傳遞到組件的代碼中,不用擔(dān)心在不同模塊中具有相同類名可能造成的問題 } ] }, devServer:{ contentBase: "./public", colors: true, historyApiFallback: true, inline: true }, plugins:[ new webpack.LoaderOptionsPlugin({ options:{ postcss: [ require("autoprefixer")//調(diào)用autoprefixer插件 ], } }) ] }三 uglify插件
提示uglifyJsPlugin is not a constructor
其實(shí)只要注意大小寫即可。uglify的u要大寫。
正確寫法:
new webpack.optimize.UglifyJsPlugin(),
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/83112.html
摘要:之前做的一個(gè)應(yīng)用,最近把首頁改成了服務(wù)端渲染的形式,過程還是很周折的,踩到了不少坑,記錄一些重點(diǎn),希望有所幫助前端使用的技術(shù)棧升級(jí)到升級(jí)到服務(wù)項(xiàng)目地址喜歡的給個(gè),感謝。。。。。。。 之前react做的一個(gè)應(yīng)用,最近把首頁改成了服務(wù)端渲染的形式,過程還是很周折的,踩到了不少坑,記錄一些重點(diǎn),希望有所幫助 前端使用的技術(shù)棧 react、react-dom 升級(jí)到 v16 react-ro...
摘要:是一款基于的服務(wù)端渲染框架,跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),受到很多前端開發(fā)人員的青睞。國內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā),我們正在使用的簡書,便是基于Vue來構(gòu)建的。 我們知道,SPA前端渲染存在兩大痛點(diǎn):(1)SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息,使...
摘要:是一款基于的服務(wù)端渲染框架,跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),受到很多前端開發(fā)人員的青睞。國內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā),我們正在使用的簡書,便是基于Vue來構(gòu)建的。 我們知道,SPA前端渲染存在兩大痛點(diǎn):(1)SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息,使...
摘要:所以你編譯后的文件實(shí)際上應(yīng)當(dāng)只輸出,這就需要在配置里用來控制這樣上面的模塊加載函數(shù)會(huì)在返回值后面加一個(gè),這樣就只返回的部分。 之前一篇文章分析了Webpack打包JS模塊的基本原理,所介紹的案例是最常見的一種情況,即多個(gè)JS模塊和一個(gè)入口模塊,打包成一個(gè)bundle文件,可以直接被瀏覽器或者其它JavaScript引擎執(zhí)行,相當(dāng)于直接編譯生成一個(gè)完整的可執(zhí)行的文件。不過還有一種很常見的...
摘要:特此寫個(gè)流水賬總結(jié),供自己以后羞恥的回顧。正逢月計(jì)劃辭職回家玩游戲過個(gè)暑假,結(jié)果在如今部門老大的忽悠下加入到了新東家。和組長兩人繼續(xù)沒晝夜的忙活,最終也按時(shí)交差,上了線。卷土重來,回報(bào)過去的一份念舊,期待的美好,個(gè)人選型入坑。 前言 2017年發(fā)生了太多的事情,結(jié)了婚,住進(jìn)了新家,成功的播了種,當(dāng)上了準(zhǔn)爸爸。公司也蒸蒸日上搬進(jìn)了高大上的寫字樓。前端的坑越來越大,都來不及填。特此寫個(gè)流水...
閱讀 2978·2021-11-23 09:51
閱讀 3609·2021-10-13 09:39
閱讀 2493·2021-09-22 15:06
閱讀 881·2019-08-30 15:55
閱讀 3147·2019-08-30 15:44
閱讀 1778·2019-08-30 14:05
閱讀 3434·2019-08-29 15:24
閱讀 2362·2019-08-29 12:44