-
node中的對象path. var path = require(‘path’); 一、（改善）進一步加快解析速度： 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查看全部
-
一、webpack里的配置loader的基本格式： module: { loaders: [ { test: /\.js/, // 這里test是正則匹配，匹配給哪些用 loader: ‘babel’, //這是loader的名字 exclude: ‘./node_modules/’, //這個配置的意思是排除哪些文件，這句話就是不對node_modules文件夾進行loader。 include: './src/‘,//這個配置的意思是指定打包的范圍，這兩個配置是提升打包速度的關鍵 query: { // query的意思是給loader加上參數 presets: [“latest”] //presets表示里面的參數名還有值 } } ] } 二、babel 1、babel是一個轉換編譯器,它能將ES6轉換成可以在瀏覽器中運行的代碼 2、安裝babel，npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常運行，視頻中的loader:'babel'不能正常運行。 三、安裝plugin的latest npm install --save-dev babel-preset-latest 四、改善：exclude,include參數 例如：exclude:'./node_modules/',//node_modules是已經引用過的，已經打包過的文件，其實這里對速度沒有影響，這是告訴你如果是不相關的文件，可以用exclude include:'./src/‘, 五、給loader指定參數presets 1、直接Loader后跟問號 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟問號 3、配置文件中用query 4、項目根目錄建立babelrc配置文件，配置文件中一個對象，對象中參數為presets. 5、config.js中指定babel，babel指定presets.查看全部
-
一、新建一個組件（component），layer有自己的模版文件和css文件還有js文件。然后用export default導出去可以給別人調用。這都是es6的寫法。 二、loader可以生成額外的文件. (外注：Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。) 三、進入webpack網站的user loaders： 使用loader的三種方式 1、require的路徑前面加loader! 2、直接配置配置文件 loaders test：對資源的正則匹配，如果匹配到Loader，就會對其進行處理。 3、直接使用cli webpack --module-bind jade --module-bind 'css=style!css',指定了2個loader，先是css loader，然后是style loader查看全部
-
一、如果想用不同的模版生成不同的html文件，只用在plugins里添加各種htmlWebpackPlugin的實例就好了。 二、頁面中引入inline的script github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中可以看到代碼。 三、htmlWebpackPlugin.files.chunks.entry就是chunks輸出的地址 四、main以inline的形式引進，a,b,c以外鏈的形式引進 1、index.html中 （1）在htmlWebpackPlugin的配置中有一個有一個參數chunks可以配置。 （2）head中 <script type="text/javascript"> <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> 重點：?。?！compilation.assets是webpack暴露出來可以獲取文件數據的方法。通過傳文件名路徑進這個對象，拿到這個文件的索引，通過調用source拿到文件內容。 compilation.assets需要的是不帶publicPath，htmlWebpackPlugin.files.chunks.main.entry帶publicPatch，所以用substr()截取。 （3）body中<%= htmlWebpackPlugin.files.chunks[k].entry %> （4）config.js中inject為false 五、小結 1、html和動態生成的文件一一對應。 2、htmlWebpackPlugin，如何自定義html，并且通過模板，參數如何傳參。 3、多頁面時，如何通過htmlWebpackPlugin生成多個html 4、深入探究通過htmlWebpackPlugin，結合模板的方式把生成的js，通過inline引入到html中。查看全部
-
webpack的三種用法 1.直接命令行使用。 2.node.js API的使用方式。 3.webpack —config webpack.config.js 一、entry 1、三種輸入方式 （1）string，輸入字符串 entry:{ main:'./src/script/main.js' }, （2）array, 數組。適用情況：兩個平行的，不相依賴的文件打包在一起。 entry:{ main:['./src/script/main.js','./src/script/a.js'] }, （3）object, 適用情況：多頁面應用程序。這里要和output里的[name]占位符配合使用，威力才能最大。如果你要打包成多個js文件，那么entry對象里的key叫做chunk就是文件名，里面的值就是需要打包的文件里面包含的文件。 entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, 二、output 1、占位符有3種：[name]、[hash]、[chunkhash] 2、output的filename （1）hash: 這次打包的hash 每次終端運行webpack命令，都會生成一段信息，這段信息的第一行就有一個hash （2）chunkhash:每一個chunk自己的hash 3、output的path，//這里配置的是輸出的文件地址查看全部
-
2.0版本直接合并會報錯“Conflict: Multiple assets emit to the same filename bundle.js ”，但是文件依然會生成。官方給出的標準是兩個文件打包后還是兩個文件，并不進行合并，如：path: './dist/js', filename: '[name].js', filename區別 1.【name】。js 生成的是源文件名稱的兩個文件夾 【name】-【hash】。js 打包后的文件名就是源文件名加上hash值 源Hash: 6ed8fcb869f32b6d0cf6 生成的是main-6ed8fcb869f32b6d0cf6.js 注意的是 這個hash值和文件名hash值相對 【name】-【chunkhash】。js 和上面一樣 生成的文件名就是源文件名加上hash值 唯一不同的是 文件名的hash值和生成的hash值不一樣 源Hash: 18a8a031019648cb4892 生成的是main-739dc04ca19361abc6a7.js查看全部
-
一、參數中傳參，模板中引用 config中的title設置，然后對index.html中用<%= %>進行取值 <%= %>表示：需要對什么進行取值 一般引用htmlWebpackPlugin里的值，直接htmlWebpackPlugin.options.title。 二、index.html中遍歷： <!--遍歷：得到的htmlWebpackPlugin的key是files和options,再分別對這兩個key進行遍歷--> <% for (var key in htmlWebpackPlugin.files){ %> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <% } %> <% for (var key in htmlWebpackPlugin.options){ %> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.options[key]) %> <% } %> 注：JSON.stringify(htmlWebpackPlugin.files[key])對這一對象的內容字符串化 三、htmlWebpackPlugin.files.chunks[’main’].entry 就可以拿到chunk main生成的文件名稱。 四、https://www.npmjs.com中搜索html-webpack-plugin可以看到對插件的詳細解釋 五、path:輸出的時候把所有文件都放到合格目錄下 publicPath:占位符，需要上線，設置時，如果設置為http://cdn.com，這樣js的路徑就會替換為絕對地址以http://cdn.com開頭的路徑，這樣就能滿足上線需求了。 六、minify，對上線的html進行壓縮 https://www.npmjs.com，輸入html-webpack-plugin，然后搜索minify，找到html-minify的鏈接點進去，能看到minify的參數列表。 1.removeComments:true //刪除注視 2. collapseWhitespace: true//刪除空格查看全部
-
一、html中引入script，如果是hash或者chunkhash生成的js，則src每次都要修改，避免修改的方法就是用webpack的插件： 1、安裝webpack插件： 終端項目目錄輸入：npm install html-webpack-plugin --save-dev 2、配置文件中建立對插件的引用 webpack.config.js中 （1）引用插件 var htmlWebpackPlugin=require('htmll-webpack-plugin'); （2）以index.html為模板 設置plugins:[ new htmlWebpackPlugin()// 初始化插件 ] 這里的代碼只會讓webpack自動生成一個index.html，里面自動把js代碼插入到index.html當中。//注意，這里說的是webpack生成的index.html，不是你自定義的index.html。 要想讓生成的index.html是自定義的，那么就要設置 plugins:[ new htmlWebpackPlugin({ template: ‘index.html’,//這里的index.html就是根目錄下的index.html文件，是你自己寫的文件。 filename: ‘index-[hash].html’,//這里指定的是生成的文件的名字 inject: 'body’,// 這里可以指定js文件是放在head還是body標簽里面具體還可以放哪，請看文檔說明。https://github.com/jantimon/html-webpack-plugin#configuration })// 初始化插件 ] （4）webpack使用插件的地址是根據配置里的context，上下文來決定的。 （5）文件生成在dist下，而不是一直在js下 output:{ path:path.resolve(__dirname,'./dist'), filename:'js/[name]-[chunkhash].js'//js文件生成到js文件夾中 },查看全部
-
webpack的三種用法 1.直接命令行使用。 2.node.js API的使用方式。 3.webpack —config webpack.config.js 一、entry 1、三種輸入方式 （1）string，輸入字符串 entry:{ main:'./src/script/main.js' }, （2）array, 數組。適用情況：兩個平行的，不相依賴的文件打包在一起。 entry:{ main:['./src/script/main.js','./src/script/a.js'] }, （3）object, 適用情況：多頁面應用程序。這里要和output里的[name]占位符配合使用，威力才能最大。如果你要打包成多個js文件，那么entry對象里的key叫做chunk就是文件名，里面的值就是需要打包的文件里面包含的文件。 entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, 二、output 1、占位符有3種：[name]、[hash]、[chunkhash] 2、output的filename （1）hash: 這次打包的hash 每次終端運行webpack命令，都會生成一段信息，這段信息的第一行就有一個hash （2）chunkhash:每一個chunk自己的hash 3、output的path，//這里配置的是輸出的文件地址查看全部
-
一、創建代碼源文件目錄：終端輸入：mkdir src. 創建代碼打包過以后的靜態資源目錄：終端輸入：mkdir dist. 文件目錄是： web pack-demo —dist —src ——script ———main.js ——style ——— —index.html —package.json —webpack.config.js 二、視頻中的是webpack1，我安裝的是webpack2。 視頻中的webpack.config.js文件中的path，改成：path:path.resolve(__dirname,'./dist/js'), 然后在文件的第一行加上var path=require('path'); 三、如果是webpack.config.js改名字，改成webpack.dev.config.js 終端目標文件輸入：webpack會失效 終端目標文件輸入：webpack --config webpack.dev.config.js會生效 四、package.json中的scripts中寫入webpack的參數后， 終端目標文件輸入：npm run webpack 參數說明： —progress 表示想查看打包的進度 —display-modules 顯示模塊 —colors 日志有顏色 —display-reasons 打包的原因 五、webpack.config.js文件里的寫法 module.exports ={} // 這樣的寫法是為了能讓webpack能import到里面的內容，因為這個配置文件畢竟是js文件，需要被webpack工具調用。 里面最基本的配置屬性有： entry: //入口文件，可以是字符串（直接輸入文件的地址），可以是對象或者數組。 output:{ //這個是輸出文件的配置 path: , //這里配置的是輸出的文件地址 filename: //這里是輸出的文件名 }查看全部
-
老師使用的webpack應該是1.0版本，在2.0可以這樣寫，就不會報錯： module.exports = { entry:'./src/script/main.js', output:{ filename:'./dist/bundle.js' } }查看全部
-
webpack處理后的js內容直接插入到html中，用compilation.assets查看全部
-
利用html-webpack-plugin的插值語法，將不同的chunk插入到不同的位置查看全部
-
htmlWebpackPlugin支持js模板語言語法，默認EJS查看全部
-
老師的webpack版本是1.X，目前已經更新到2.X，使用2.x版本的朋友配置上稍微有點和老師說的不一樣： 1： 在webpack.config.js里面，向loader傳參不在使用query，而是使用options {test: '/\.js$/', loader: 'babel-loader', options: {'presets': ['env']}} （-loader不可以省略） 2： 另外如果是在.babelrc文件中配置的話，千萬不要給.babelrc文件添加諸如js, json的后綴名，這個文件沒有后綴，切記！切記！查看全部
舉報
0/150
提交
取消