-
package.json中加入打包參數,運行npm run webpack查看全部
-
另一種方式查看全部
-
靜態引入某一通用腳本文件，減少http請求查看全部
-
一個index.html的模板生成三個頁面 a b c,并且使用chunk參數指定每個頁面需要的腳本文件查看全部
-
獲取不同文件的方式，并將它們分別注入到不同位置查看全部
-
遍歷的方式查看全部
-
一、添加圖片 1、css中的背景圖片。 （1）安裝file-loader 終端目標文件輸入：npm install file-loader --save-dev 2、模板文件layer.tpl直接引用圖片。 （1）絕對路徑：直接寫絕對路徑就行。 （2）相對路徑： <img src="${require('../../assets/bg.jpg')}" 3、最根部的文件index.html引用圖片。 （1）絕對路徑：直接寫絕對路徑就行。 （2）相對路徑：file-loader 二、圖片打包后的輸出地址： 1、 query:{ name:'assets/[name]-[hash:5].[ext]' } 2、安裝url-loader url-loader和file-loader相似，但是url-loader可以指定limit參數。 （1）終端目標文件輸入：npm install url-loader --save-dev url-loader可以處理文件或者圖片，當文件/圖片大小大于指定的limit,就會丟給filel-loader去處理，當小于設定的limit，就會轉為base64編碼，不再是一個url(不再是一個http請求)，圖片會被打包進html,css,js （2）兩種圖片引用方式：①通過http請求load進來。瀏覽器會有緩存，比較適用于重復性較高的圖片。②打包成base64。任何地方要用時，都會有base64編碼存在那里，會造成代碼的冗余，增加代碼的體積。 三、壓縮圖片 1、安裝image-webpack-loader 終端目標文件輸入：npm install image-webpack-loader --save-dev 2、先壓縮文件再傳給url-loader判斷。 3、一直是錯誤提示Cannot read property 'bypassOnDebug' of null， 搜了評論、問答，百度了都沒有看到解決辦法？？？查看全部
-
一、layer.html是模板文件 1、處理模板文件的做法：（1）webpack將模板文件當做一個字符串進行處理。（2）webpack將模板文件當成已經編譯好的的模板的處理函數。 對js模板語法，模板引擎，模板的作用的認識和了解再來看這章會比較容易理解。 二、要支持html文件，安裝html-loader 終端目標文件輸入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安裝ejs 終端目標文件輸入：npm install ejs-loader --save-dev layer.js載入ejs模板時，返回的是一個function，這時的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一個已經編譯過的函數 四、react——jsx vue——jsx查看全部
-
一、less-loader 1、安裝： 終端目標文件輸入：npm i less-loader --save-dev 錯誤提示：npm WARN [email protected] requires a peer of less@^2.3.1 but none was installed. 說明less沒有裝 2、安裝less 終端目標文件輸入：npm i less --save-dev 二、less-loader會自己處理@import,就不用再加importLoaders 三、sass-loader 1、安裝 終端目標文件輸入：npm i sass-loader --save-dev 出現錯誤提示： npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none was installed. 說明需要安裝node-sass，解決方法： 終端目標文件輸入：npm i node-sass --save-dev 會有錯誤提示：npm WARN prefer global [email protected] should be installed with -g 但是它會自動安裝到全局？？？（不確定）查看全部
-
五、@import語法引入的其他模塊，或css,這時引入的文件postcss-loader沒有起作用，解決方法: 用新的rules,use等的用法，不用原來的loaders,loader module:{ rules:[ { test:/\.js$/, loader:'babel-loader', exclude:path.resolve(__dirname,'/node_modules/'),//已經引用過的，已經打包過的文件 include:path.resolve(__dirname,'/src/'), query:{ presets:['latest'] } }, { test:/\.css$/, use:[ { loader:'style-loader' }, { loader:'css-loader', options:{ importLoaders:1 } }, { loader:'postcss-loader' } ] } ] },查看全部
-
安裝cssloader npm install css-loader style-loader --save-dev查看全部
-
cd 進入一個目錄 mkdir webpack-test cd webpack-test npm init npm install webpack --save-dev查看全部
-
一、安裝style-loader和css-loader 終端目標文件輸入：npm i style-loader css-loader --save-dev 二、webpack可以將任何資源視為一個模塊。 三、這里將css引用進來， 1、app.js:用的是es6的import語法 2、webpack.config.js: module的loaders 四、postcss-loader 對css進行瀏覽器兼容性考慮時，可以用到這個loader 1、安裝postcss-loader 終端目標文件輸入：npm install postcss-loader --save-dev 2、是一個后處理器。 3、可以加瀏覽器的前綴 （1）安裝autoprefixer 終端目標文件輸入：npm install autoprefixer --save-dev 4、loader處理方式是從右到左，即從數組的最后一項往前 5、webpack.config.js中， postcss:[ require('autoprefixer')({ broswers:['last 5 versions'] }) ], 運行出現錯誤： - configuration has an unknown property 'postcss'. These properties are valid: 原因：視頻是webpack1.0，而現在已經是webpack2.0了， 終端提示錯誤時也給出了解決方案： Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { postcss: ... } }) ] 是說webpack2.0支持上述這種方式查看全部
-
一、（改善）進一步加快解析速度： 1、path.resolve(__dirname,'app/src') node有個api：path，path有個方法：resolve（解析）。 __dirname：在運行環境下的變量，在當前環境的路徑， 'app/src':相對路徑 解析完了之后可以得到一個絕對路徑 2、改善方法： （1）改善的代碼：exclude:path.resolve(__dirname,'/node_modules/'), include:path.resolve(__dirname,'/src/') （2）這樣進一步改善后時間是618ms （3）注意，如果是'node_modules'（視頻中），而不是'/node_modules/'的話，也能運行。但是'/node_modules/'要更快，'/node_modules/')是618ms,而'node_modules'（視頻中）花的時間是1254ms查看全部
-
一、babel 1、babel是一個轉換編譯器,它能將ES6轉換成可以在瀏覽器中運行的代碼 2、安裝babel 終端目標文件夾輸入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常運行，視頻中的loader:'babel'不能正常運行。 4、babel的loader是一個非常耗時的轉換。 改善之前的時間是8260ms 二、query: ['kw??r?]查詢 presets:[pri?'sets] 三、安裝plugin的latest 終端目標文件輸入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的參數5個：test,exclude,include,loader,loaders （2）改善方法：exclude,include參數 例如：exclude:'./node_modules/',//node_modules是已經引用過的，已經打包過的文件，其實這里對速度沒有影響，這是告訴你如果是不相關的文件，可以用exclude include:'./src/', 1）會報錯：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）報錯的解決方法： exclude:__dirname+'/node_modules/',//已經引用過的，已經打包過的文件 include:__dirname+'/src/', （3）這樣初步改善后時間是1210ms 五、給loader指定參數presets 1、直接Loader后跟問號 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟問號 3、配置文件中用query 4、項目根目錄建立babelrc配置文件，配置文件中一個對象，對象中參數為presets. 5、config.js中指定babel，babel指定presets.查看全部
舉報
0/150
提交
取消