-
插件名稱 html-webpack-plugin查看全部
-
一、const:['k?nst],常量，常數。 export:[?eksp??t；?k?-] :輸出，導出。 二、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查看全部
-
一、頁面中引入inline的script github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中可以看到代碼。 二、assets:[??sets] 資產 compilation:[?k?mp??le??n] n.匯編，編輯 三、htmlWebpackPlugin.files.chunks.entry就是chunks輸出的地址 四、main以inline的形式引進，a,b,c以外鏈的形式引進 1、index.html中 （1）head中 <script type="text/javascript"> <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> compilation.assets是打包以后生成的文件對象。通過傳文件名路徑進這個對象，拿到這個文件的索引，通過調用source拿到文件內容。 compilation.assets需要的是不帶publicPath，htmlWebpackPlugin.files.chunks.main.entry帶publicPatch，所以用substr()截取。 （2）body中 <% for (var k in htmlWebpackPlugin.files.chunks){ %> <% if(k!='main') %> <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% } %> <% } %> （3）config.js中 inject為false查看全部
-
一、參數中傳參，模板中引用 config中的title設置，然后對index.html中用<%= %>進行取值 <%= %>表示：需要對什么進行取值 二、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])對這一對象的內容字符串化 三、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的參數列表。查看全部
-
一、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:[] （3）文件生成在dist下，而不是一直在js下 output:{ path:path.resolve(__dirname,'./dist'), filename:'js/[name]-[chunkhash].js'//js文件生成到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, 適用情況：多頁面應用程序 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查看全部
-
插件的其它參數： plugins:[ new htmlWebpackPlugin({ filename:'index-[hash].html', //文件名 template:'index.html',//傳參，讓兩個html文件建立聯系 inject:'head' ,//讓生成的script標簽放在head標簽還是body標簽中 title: 'i am back' //html中的title要取到這個值，需要寫成：<title><%= htmlWebpackPlugin.options.title %></title> }) ] 插件參數與調用 <body> <!--查看htmlWebpackPlugin下所有參數--> <!--JSON.stringify：JSON方法，讓數組或者對象都轉化為字符串--> <% for(var key in htmlWebpackPlugin.files){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <% }%> <% for(var key in htmlWebpackPlugin.options){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %> <% }%> </body> 上線操作 1. 設置上線地址：在output中添加publicPath屬性 output:{ publicPath:'http://cdn.com' } 2. 壓縮當前生成的html文件：在plugins中添加minify屬性 minify:{ removeComments:true,//去掉注釋 collapseWhitespace:true,//去掉空格、空行 } npm插件查詢官網：https://www.npmjs.com/查看全部
-
安裝并引用插件 針對每次修改js文件之后，[hash]占位符就會改變，在index.html引用中，每次都要更改文件名的繁瑣工作，可以利用插件解決 1. 命令窗口輸入：npm install html-webpack-plugin --save-dev 2. 在配置文件webpack.config.js中引用插件：var htmlWebpackPlugin = require('html-webpack-plugin'); 3. 在插件屬性中初始化plugin： module.exports = { plugins:[ new htmlWebpackPlugin() ] } 4. 再打包一次：在命令窗口輸入npm webpack run 5. 生成的index.html文件就能自動引用之前生成的兩個js文件 6. 讓兩個ndex.html建立聯系：在plugins的設置中加入模板參數： module.exports = { plugins:[ new htmlWebpackPlugin({ template: 'index.html' //此時上下文環境默認在根目錄下 }) ] } 7. 讓生成的js和html文件放在不同的文件夾下：修改output參數 output:{ path: path.resolve(__dirname, 'dist'),//打包后的存放路徑 filename:'js/[name]-[chunkhash].js' //增加一個相對路徑 }, 8. 插件的其它參數： plugins:[ new htmlWebpackPlugin({ filename:'index-[hash].html', //文件名 template:'index.html',//傳參，讓兩個html文件建立聯系 inject:'head' //讓生成的script標簽放在head標簽還是body標簽中 }) ]查看全部
-
lodaer查看全部
-
webpack:代碼分割查看全部
-
數據查看全部
-
三 entry 有三種設置方式：字符串型單個路徑，數組型路徑，對象 1. 單個路徑：entry:'./src/script/main.js', 2. 數組路徑：在webpack.config.js文件中，將entry修改為：entry:['./src/script/main.js','./src/script/a.js'] 3. 對象：分為key和value，key表示 chunk name，value表示真實的entry，此時的entry可以是單個路徑也可以是數組路徑。主要應用于多頁面場景 四 output 當entry采用對象設置時，為了使擁有不同chunk name的文件分別打包，需要設置output * 修改filename：filename:'[name]-[chunkhash].js' （注意：此時有三種占位符可以選擇。[name]對應chunk name，[hash]本次打包的哈希值，[chunkhash]每一個chunk都對應一個哈希值，如果文件被修改，哈希值就隨之變化，如果文件沒有修改，哈希值就保持和上次打包的一樣）查看全部
-
一 配置文件 ① 配置文件是默認的文件名（webpack.config.js） 1. 在文件的根目錄下創建webpack.config.js文件 2. 配置參數 var path = require('path'); module.exports = { entry:'./src/script/main.js',//打包的入口 output:{ path: path.resolve(__dirname, 'dist/js'),//打包后的存放路徑 （絕對路徑） filename:'bundle.js'//打包后的文件名 } } 3. 在命令行 中運行：webpack ② 配置文件不是默認的文件名 1. 比如配置文件的文件名為webpack.dev.config.js 2. 在命令行中運行時：webpack --config webpack.dev.config.js 二 設置webpack參數 1. 在npm腳本文件package.json文件中設置 2. 在scripts中添加："webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"查看全部
-
//webpack2.0 解決style-loader!css-loader!post-loader問題,并解決css中@import的問題 //webpack.config.js module:{ rules:[ { test:/\.css$/, use:[ 'style-loader', { loader:'css-loader', options:{ importLoaders: '1' } }, { loader:'postcss-loader', options:{ plugins:function(){ return [ require('autoprefixer')({broswers:['last 5 versions']}) ]; } } } ] }, ] } //解決@import(前提要引入require(webpack)) plugins: [ new webpack.LoaderOptionsPlugin({ options: { postcss: function(){ return [ require("autoprefixer")({ browsers: ['ie>=8','>1% in CN'] }) ] } } }) ]查看全部
-
webpack 先全局安裝 npm install webpack -g 然后再安裝到當前目錄 npm install webpack --save-dev,目錄的名字不能是webpack;如果這一步安裝出錯，先 npm cache clear 命令行添加style-loader、css-loader webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch --watch 文件改變自動打包查看全部
舉報
0/150
提交
取消